Итак ... ответ таков: ни один из ваших JS-кодов никогда не запускается, потому что Chrome реализует элементы ввода HTML5, включая проверку формы. Таким образом, если вы правильно не заполните поля, ваш код проверки никогда не сработает!
В HTML5 атрибут required является логическим значением, либо true, либо false. Согласно спецификации , браузер должен запустить событие invalid в поле проблемы. Вы можете отменить поведение блокировки по умолчанию в этой точке, если хотите. Однако ваш сценарий снова выходит из строя при попытке attr('required'). Он вернет true или false в Chrome, используя HTML5, а не значение, подобное email, как вы ожидаете.
Так что вам нужно добавить эти две части, если вы хотите, чтобы это работало:
$(":input").bind("invalid", function(e){
e.preventDefault(); // Don't block the form submit
});
А затем перефакторинг вашего кода с
var a = $(this).attr('required');
будет
var a = $(this).attr('required') ? $(this).attr('type') : "";
И при необходимости измените оператор switch, чтобы он соответствовал
Последняя идея : Вы также можете выбрать действительно крутой подход (он же «Обнаружение функций») и сделать это вместо этого:
Оберните внутреннюю часть вашей текущей функции validate: следующим:
if(typeof $('<input />')[0].checkValidity === "undefined") {
... existing code ..
} else {
$(':input').bind('invalid', function(){
$(this).addClass('error');
}).blur(function(){
// If valid, turn off error
// If invalid, turn on error
$(this).toggleClass('error', !this.checkValidity());
});
}
Вот демонстрационная версия второй версии, которая будет работать в Chrome и, возможно, текущей / бета-версии Opera.