Как сфокусировать недопустимые поля с помощью проверки jQuery?

Существует параметр focusInvalid, который по умолчанию равен true. Но он работает только тогда, когда происходит представление формы. Если я подтвержу форму с помощью valid, то это не сработает. Итак, вопрос в том, как сфокусировать недопустимое поле при использовании valid?

Обратите внимание на эту демонстрацию, чтобы увидеть разницу. Просто нажмите кнопки там.

Ответ 1

Прежде всего вам нужно сохранить валидатор в переменной, чтобы вы могли использовать его в обработчике кликов:

var validator = $("#test-form").validate({ /* settings */ });

Затем в обработчике проверки можно вручную вызвать функцию focusInvalid из переменной validator:

  $("#validate").click(function() {
        if ($("#test-form").valid()) 
              alert("Valid!");
        else
              validator.focusInvalid();

        return false;
  });

Пример

Ответ 2

С помощью invalidHandler вы можете установить фокус на первый элемент, который выходит из строя:

$("#form").validate({
    onfocusout: false,
    invalidHandler: function(form, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {                    
            validator.errorList[0].element.focus();
        }
    } 
});