jquery - 如何使用 jQuery 验证聚焦无效字段？

Question

有focusInvalid选项，true默认情况下。但它仅在表单提交发生时才有效。如果我用valid方法验证表单，那么它不起作用。那么问题是如何在valid使用时聚焦无效字段？

请查看此演示以查看差异。只需按那里的按钮。

Answer 1

使用 ，invalidHandler您可以将焦点设置到第一个失败的元素：

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

Answer 2

首先，您需要将验证器保存到一个变量中，以便您可以在点击处理程序中使用它：

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

然后在验证处理程序中，您可以focusInvalid从validator变量中手动调用函数：

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

        return false;
  });

例子