如何使用 jQuery Validator 获取所有无效元素？

Question

我想做的事：

我需要遍历所有内部具有无效值的 HTML 对象。这是必要的，因为我有标签页，我需要打开一些发生错误的特定标签。为此，我需要获取这些对象的父对象。

这就是我想解决的方法：

$form.validate().settings.invalidHandler = function (form, validator) {
    var errors = validator.numberOfInvalids();
    if (errors) {
        validator.errorList[0].element.focus();
        for (var invObj in validator.errorList) {
            //do something for each invalid object
        }
    }
};

其中 $form 是 <form> 对象，其中有一些输入要在内部进行验证。

我以为在我调用$form.validate() 或$form.valid() 之后，每个无效对象都会调用它。事实上，它根本没有被调用。你知道一些更好的方法来完成它吗？

Answer 1

如何使用 jQuery Validator 获取所有无效元素？

这就是我想解决的方法：

你还没有解释你想要做什么。

你知道一些更好的方法来完成它吗？

您没有解释任何关于您要完成什么，或者为什么从未尝试过 the example in the documentation。

通常，将自定义的invalidHander 回调放在.validate() 方法中。你关注the documentation了吗？

$("#myform").validate({
    // other rules, options, callbacks, etc.,
    invalidHandler: function(event, validator) {
        var errors = validator.numberOfInvalids(); // <- NUMBER OF INVALIDS
        console.log(errors);
    }
});

使用.validate()方法正确初始化表单后，您将获得首次触发表单验证时的无效数。

演示：http://jsfiddle.net/t2vdfjyn/

但是，如果您希望在生成每个新错误或清除现有错误后自行更新无效数，那么invalidHandler 不是正确使用的函数；你需要the showErrors callback 来代替......

$("#myform").validate({
    // other rules, options, callbacks, etc.,
    showErrors: function(errorMap, errorList) {
        var errors = this.numberOfInvalids();  // <- NUMBER OF INVALIDS
        console.log(errors);

        this.defaultShowErrors(); // <- ENABLE default MESSAGES
    }
});

演示 2：http://jsfiddle.net/t2vdfjyn/1/

---

编辑：

代码中的注释：

//do something for each invalid object

为每个无效对象做一些事情是插件自动处理的事情...这基本上是这个插件设计的后半部分。如果您要准确说明您要对每个无效对象执行什么操作，我可以向您展示哪个jQuery Validate option 可以用于此目的。

---

编辑 2：

我有标签页，我需要打开一些发生错误的特定标签。为此，我需要获取这些对象的父对象。

The showErrors callback function 有两个参数...

• errorMap：键/值对，其中键是指输入字段的名称，对要为该输入显示的消息进行赋值。

• errorList：所有当前已验证元素的数组。包含具有以下两个属性的对象：

  • message，类型：字符串，为输入显示的消息。
  • element，类型：Element，此条目的 DOM 元素。

您需要的有关输入元素的所有信息似乎都包含在此处。一旦你有了输入元素的name，你就可以使用jQuery来获取父元素了。

    showErrors: function(errorMap, errorList) {
        var errors = this.numberOfInvalids(); // <- NUMBER OF INVALIDS
        $("#num_invalids").html(errors);

        console.log(errorMap);
        $.each(errorMap, function(key, value) {
            console.log(key); // <- name of invalid field
            var parent = $('[name="' + key + '"]').parent();
            console.log(parent); // <- parent object
        });

        this.defaultShowErrors(); // <- ENABLE default MESSAGES
    }

演示 3：http://jsfiddle.net/t2vdfjyn/2/