jquery - validate form segments independently -

i have big form splitting across 4 segments in wizard way. wizard plugin (smart wizard) has form segment in focus avtive while remaining 3 segments hidden in dom.

i using jquery validate plugin validate form on fly. problem validating part of form shown. when user moves next step want run validation on part of form.

is there way specify array of elements validate validation plugin triggered ?

in onleavestep option of wizard plugin, called validate plugin. weather or not user clicks next or previous validation triggered.

    var $myform = $("#registeration");     var validator = $myform.validate({         errorelement: "span",         rules: {             regtype: "required",             firstname: "required",             lastname: "required",             address1: "required",             city: "required",             country: "required",             phone1: "required",                              email: {                  required: true,                  email: true             },             attendees: {                 required: true,                 digits: true             }         },         messages: {             regtype: "select option",             firstname: "enter first name",             lastname: "enter last name",             address1: "enter address",             city: "enter city",             country: "enter country",             phone1: "enter phone number",             email: "enter e-mail",             attendees: "enter number of persons attending (including yourself)"         }                    });     // initialize smart wizard           $('#wizard').smartwizard({         transitioneffect:'slide',         hidebuttonsondisabled:true,         transitioneffect: 'fade',         onleavestep: function(){             if(validator.form()){                 //$myform.trigger('submit');                 return true;             }else{                 return false;             }                    }     }); 

quote op:

"in onleavestep option of wizard plugin, called validate plugin. wether or not user clicks next or previous validation triggered"

the problem .validate() not method "testing" form's validity. rather, .validate() method initializing plugin on form. once on page load , subsequent calls .validate() ignored.

to test form programatically jquery validate plugin, use the .valid() method triggers test , returns boolean.

the jquery validate plugin, default, ignore "hidden" input elements. perhaps can leverage feature advantage when using wizard plugin.

within dom ready handler...

$('#myform').validate({    // rules & options }); 

within wizard...

onleavestep: function(){     $('#myform').valid(); } 

otherwise, when create multi-step forms, use unique set of form tags each section. use .valid() test section before moving next. (don't forget first initialize plugin, call .validate(), on each form when page loaded.) on last section, use .serialize() on sections , concatenate each data query string submitted.

something this...

$(document).ready(function() {      $('#form1').validate({         // rules     });      $('#form2').validate({         // rules     });      $('#form3').validate({         // rules,         submithandler: function (form) {            // serialize , join data forms            // ajax submit            return false;         }     });      $('#gotostep2').on('click', function() {         if ($('#form1').valid()) {             // code reveal step 2         }     });      $('#gotostep3').on('click', function() {         if ($('#form2').valid()) {             // code reveal step 3         }     });      // there no third click handler since plugin takes care of     // built-in submithandler callback function on last form.  });