如何使用 jQuery 验证聚焦无效字段？答案

【问题标题】：How to focus invalid fields with jQuery validate?如何使用 jQuery 验证聚焦无效字段？
【发布时间】：2012-04-11 18:35:43
【问题描述】：

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

请参阅this demo 以了解差异。只需按那里的按钮。

【问题讨论】：

@Evan，你不喜欢 jsbin 吗？你也可以修改它 - jsbin.com/ayupob/edit#javascript,html

标签： jquery jquery-validate

【解决方案1】：

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

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

【讨论】：

jQuery validate 选择第一个无效元素或最后一个聚焦的无效元素。您的代码是我发现的唯一可以避免这种烦恼并始终选择第一个的代码。谢谢！
是的，有很多问题会影响 jquery.validates 焦点处理。它本身就像一个顶部，但是当您开始添加响应式设计和更多 jquery 脚本时，焦点可能会有所偏离。不错的脚本，感谢发布。
+1 这个选项，在任何地方都找不到。顺便说一句，一个小提示：也做validator.lastActive = validator.errorList[0].element; 以避免专注于两个元素.. 这是我面临的end date 字段作为最后一个活动和start date 作为第一个无效字段，日期选择器在两个字段上弹出（当然两者都是无效的）。干杯！！

【解决方案2】：

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

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

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

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

        return false;
  });

Example

【讨论】：