validate form segments independently

Question

I have a very big form which I am splitting across four segments in a wizard like way. The wizard plugin (smart wizard) has the form segment currently in focus avtive while the remaining 3 segments are hidden in the dom.

I am using the jquery validate plugin to validate the form on the fly. The problem is validating that part of the form which is shown. Only when the user moves to the next step I want to run validation on that part of the form.

Is there a way to specify an array of elements to validate any the validation plugin is triggered ?

In the onLeaveStep option of the wizard plugin, I called the validate plugin. Weather or not the user clicks next or previous validation will be 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 an option",
            firstname: "Enter your first name",
            lastname: "Enter your last name",
            address1: "Enter your address",
            city: "Enter your city",
            country: "Enter your country",
            phone1: "Enter your phone number",
            email: "Enter your 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;
            }           
        }
    });

Answer 1

Quote OP:

"In the onLeaveStep option of the wizard plugin, I called the validate plugin. Wether or not the user clicks next or previous validation will be triggered"

The problem is that .validate() is not a method for "testing" the form's validity. Rather, .validate() is the method for initializing the plugin on the form. You would do it once on page load and any subsequent calls to .validate() are ignored.

To test the form programatically with the jQuery Validate plugin, you use the .valid() method which triggers a test and returns a boolean.

The jQuery Validate plugin, by default, will also ignore any "hidden" input elements. So perhaps you can leverage this feature to your advantage when using your wizard plugin.

within your DOM ready handler...

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

within your wizard...

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

Otherwise, when I create multi-step forms, I use a unique set of form tags for each section. Then I use .valid() to test the section before moving to the next. (Don't forget to first initialize the plugin, call .validate(), on each form when the page is fully loaded.) Then on the last section, I use .serialize() on all sections and concatenate each into a data query string to be submitted.

Something like this...

$(document).ready(function() {

    $('#form1').validate({
        // rules
    });

    $('#form2').validate({
        // rules
    });

    $('#form3').validate({
        // rules,
        submitHandler: function (form) {
           // serialize and join data for all forms
           // ajax submit
           return false;
        }
    });

    $('#gotoStep2').on('click', function() {
        if ($('#form1').valid()) {
            // code to reveal step 2
        }
    });

    $('#gotoStep3').on('click', function() {
        if ($('#form2').valid()) {
            // code to reveal step 3
        }
    });

    // there is no third click handler since the plugin takes care of this with the
    // built-in submitHandler callback function on the last form.

});