jquery.validate validation for non active tabs

Question

I've a form which uses jQuery UI based tab to organize different fields. I'm using jquery.validate.min.js for validation. For example some fields have class = "required" which informs the plugin for required field validation. Finally, before form submit I validate the form to ensure all inputs are correct. A simple usage like -

HTML

...
<input type="text" class = "required" ...

SCRIPT

...
$("#frmClaim").validate();//to initilize validation
...
$('#frmClaim').submit(function () {            
             if($(this).valid())
                { ... }
         });
...

The issue I'm facing is that if I'm on tab 3 and there's a "required" field on tab 2 which the user has not populated, the validation is NOT performed. The validation triggers only for the fields which are visible - that is the active. Is this possible or am I missing something?

For now, on submit I manually activate each tab, perform .valid and proceed. Is there a better work around?

Redan

Answer 1

Initialize validation like this to validate your hidden fields

$("#frmClaim").validate( 
 { ignore: [] }
);

Paragrapher

Glad that got me half way thru. But as expected it didn't set focus to the tab which had error so I believe I'm gonna have to manually check and set it. More then this would be over-expectation. – Redan

Reading the project site, this is due to hidden elements being ignored by default from 1.9. github.com/jzaefferer/jquery-validation/issues/279 – Mantis

Answer 2

I found a solution that worked for me. The idea is to iterate for all tabs, calling validate on the form and stop when you find an invalid tab or submit the form if there is no invalid fields.

$("#my_form").validate({
        submitHandler: function (form, evt) {
            var f = $(form);
            var tab = $("#my_tab_id");
            var tabs_count = tab.children('ul').children('li').length;
            var active = tab.tabs('option', 'active');
            var invalid = false;
            var validated = 0;

            while (validated < tabs_count && !invalid) {
                if (!f.valid()) {
                    invalid = true;
                    break;
                }

                active++;
                active = active % tabs_count;
                tab.tabs('option', 'active', active);

                validated++;
            }

            if (!invalid)
                form.submit();
            else
                evt.preventDefault();
        },
        rules: {
            ...
        },
        messages: {
            ...
        }
    });

Almond

Answer 3

Try this:

function saveStuff() {

    $.validator.unobtrusive.parse('#FORMID');

    var data = {};

    var anyError = false;

    var _frm = $('#FORMID');

    var _validator = _frm.data('validator');
    _validator.settings.ignore = "";

    _frm.find('input, select, textarea').each(function () {
        if (!_validator.element(this)) {
            anyError = true;
        }
    });

    if (anyError) {
        return false;
    }

    //SAVE DATA CODE HERE
}

Doelling

Answer 4

Try it like,

var frmCl=$("#frmClaim").validate();//to initilize validation
...
$('#frmClaim').submit(function () { 
     if($(frmCl).valid())
         { ... }
});

Gluttonize

are you sure this is what you mean? It doesn't work. frmCl is a reference to the validator, calling $(frmCl).valid() just throws an error. – Paragrapher