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.