How to get all invalid elements using jQuery Validator?

Question

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?

**If you are using Unobtrusive Validation / ASP.NET MVC**, you have to apply to the validation object *after* the form is already, see the question [How to add a 'submitHandler' function when using jQuery Unobtrusive Validation?](https://stackoverflow.com/q/4747017/1366033) — KyleMit, Apr 04 '18 at 21:47

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

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/

What I was trying to do is exactly what I wrote about (I wanted to get all invalid elements using jQuery validator). In other words: I wanted to get all inputs (as HTML object) that have some not permitted value inside. — Piotrek, Jun 18 '16 at 18:17
@Ludwik11, *"What I was trying to do is exactly what I wrote about"* ~ not exactly. If you explain what you want to do with each invalid object, I could show you which plugin option can handle that for you. See my edits. — Sparky, Jun 19 '16 at 01:02
I will mark your answer as "best", because your code in theory does exactly what I wanted. Practically, in my case, something in code that I work with is really messed up. Number of errors equals always 0 (in fact there are some, they show up in html after clicking "submit" button). ErrorMap is also empty, even if it shouldn't. I will need to find some other way to solve it... But thanks for trying to help. — Piotrek, Jun 20 '16 at 17:19
@Ludwik11, `errorMap` should never be empty unless the form is valid. I agree, there is something seriously broken in your code that we cannot see. — Sparky, Jun 20 '16 at 17:25

How to get all invalid elements using jQuery Validator?

1 Answers1