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

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