Ludwik11 Ludwik11 - 4 months ago 40
Javascript Question

How to get all invalid elements using jQuery Validator?

What I'm trying to do:

I need to iterate through all HTML objects that have some invalid value inside. This is necessary, because 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.

This is how I wanted to solve it:

$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
}
}
};


Where $form is
<form>
object that have some inputs to validate inside.

I thought that it will be called for each invalid object after I call
$form.validate()
or
$form.valid()
. In fact, it isn't called at all. Do you know some better ways to accomplish it?

Answer

How to get all invalid elements using jQuery Validator?

This is how I wanted to solve it:

You have not explained what you're trying to do.

Do you know some better ways to accomplish it?

You have not explained anything about what are you trying to accomplish, or why the example in the documentation was never attempted.

Typically, one puts their custom invalidHander callback inside of the .validate() method. Have you followed the documentation?

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

After properly initializing the form using the .validate() method, you will get the number of invalids when form validation is first triggered.

DEMO: http://jsfiddle.net/t2vdfjyn/

However, if you want the number of invalids to update itself after every new error is generated or existing error is cleared, then the invalidHandler is not the proper function to use; you'll need the showErrors callback instead...

$("#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
    }
});

DEMO 2: http://jsfiddle.net/t2vdfjyn/1/


EDIT:

A comment within your code:

//do something for each invalid object

Doing something for each invalid object is what the plugin handles automatically... it's basically the second half of what this plugin is designed to do. If you were to explain exactly what you're trying to do for each invalid object, I could show you which jQuery Validate option can be leveraged for that purpose.


EDIT 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 has two arguments...

  • errorMap: Key/value pairs, where the key refers to the name of an input field, values the message to be displayed for that input.

  • errorList: An array for all currently validated elements. Contains objects with the following two properties:

    • message, Type: String, The message to be displayed for an input.
    • element, Type: Element, The DOM Element for this entry.

It seems like all the information you need about the input element would be contained here. Once you have the name of the input element, you can use jQuery to get the parent.

    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
    }

DEMO 3: http://jsfiddle.net/t2vdfjyn/2/

Comments