jquery - 如何使用 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:键/值对，其中键指的是输入字段的名称，值是要为该输入显示的消息。

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

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

似乎您需要的有关输入元素的所有信息都包含在这里。获得输入元素的名称后，您可以使用 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/