如何使用 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

How to get all invalid elements using jQuery Validator?

This is how I wanted to solve it:

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

Do you know some better ways to accomplish it?

您没有解释任何关于您想要完成的事情，或者为什么从未尝试 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:

I have tabbed page and I need to open some specific tab where the error occurred. In order to do this, I need to get parent of those objects.

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

errorMap: Key/value 对，其中键指的是输入字段的名称，为该输入显示的消息赋值。
errorList：所有当前验证元素的数组。包含具有以下两个属性的对象：
- message，类型：字符串，为输入显示的消息。
- 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/

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

How to get all invalid elements using jQuery Validator?

jquery

jquery-validate