Validate subset of a form using jQuery Validate plugin

Question

My HTML form has a number of divs that are the steps of a wizard. Upon clicking a \"next\" button I want to validate just the active div. I\'m using the jQuery.Validate.js p

Answer 1

I tried this solution and it didn't work for me. So here is how i achieved same behaviour, using jquery.validation plugin.

The validator:

var form = $('#form');

    // init validator obj and set the rules
    form.validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-inline', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",
        rules: {
            // the rules, as usual
        },

        highlight: function (element) { // hightlight error inputs
            $(element).closest('.control-group').addClass('error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change dony by hightlight
            $(element)
                .closest('.control-group').removeClass('error'); // set error class to the control group
        }
    });

Using bootstrap form wizard.

This is how i validate each step:

$('#step :input').valid()

Works like a charm.

Answer 2

Taking what jAndy suggested, I created this helper function:

jQuery.validator.prototype.subset = function(container) {
    var ok = true;
    var self = this;
    $(container).find(':input').each(function() {
        if (!self.element($(this))) ok = false;
    });
    return ok;
}

usage:

if (wizardForm.validate().subset('#first-step')) {
    // go to next step
}

Answer 3

If you look at the options for the validate() function one of the options is ignore, which by default will prevent the validator from attempting to validate any fields that match the CSS pseudo-class :hidden. I used this in combination with the FuelUX Wizard and was able to prevent the wizard from progressing to the next step with the following:

$( '#wizard' ).wizard().on( 'change', function( event, info ) {
    if ( ! $( '#wizard_form' ).valid() ) event.preventDefault();
});