Making jquery validation work with a form wizard plugin?

Question

I'm using the jquery validation plugin along with this other one I found to create a sort of form wizard. The problem I'm having is making the validation plugin fire on the next buttons for the form wizard so each step process gets validated instead of just being on submit button.

Here is the jsfiddle: http://jsfiddle.net/DHNPz/

The javascript part contains the code I wrote for the form and also the formtowizard JS. I am assuming I need to edit this part of the code:

    function createNextButton(i) {
        var stepName = "step" + i;
        $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next'><button class='next' type='button'>Next Step</button></a>");

        $("#" + stepName + "Next").bind("click", function(e) {
            $("#" + stepName).hide();
            $("#step" + (i + 1)).show();
            if (i + 2 == count)
                $(submmitButtonName).show();
            selectStep(i + 1);
        });
    }

Inside of the click function. I'm just not sure how to call the validation trigger here

Please help!

Answer 1

First, you'll need to add something like

ignore: ':hidden'

to your validate options so that it only validates visible fields. That way you can validate only the fields visible in each step, moving to the next step once they are valid. You can then check the validation at any time by running

$('#RMAForm').validate().form()

to trigger the validation when someone clicks the next button. You'd update the code you pasted above like so:

function createNextButton(i) {
    var stepName = "step" + i;
    $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next'><button class='next' type='button'>Next Step</button></a>");

    $("#" + stepName + "Next").bind("click", function(e) {
        // run the validation and check if the form is valid
        if ($('#RMAForm').validate().form()) {
            $("#" + stepName).hide();
            $("#step" + (i + 1)).show();
            if (i + 2 == count)
                $(submmitButtonName).show();
            selectStep(i + 1);
        } else {
            return false; // prevent moving on if the form is invalid
        }
    });
}

Answer 2

Well it is anserwed, but I found this one too.

The Idee is, to extend the nextButton with a Validation Option. Like this:

function createNextButton(i) {
    var stepName = "step" + i;
    $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next</a>");

    $("#" + stepName + "Next").bind("click", function (e) {
        if (options.validationEnabled) {
            var stepIsValid = true;
            $("#" + stepName + " :input").each(function (index) {
                checkMe = element.validate().element($(this));
                //stepIsValid = !element.validate().element($(this)) && stepIsValid;
                stepIsValid = checkMe && stepIsValid;
            });

            if (!stepIsValid) {
                return false;
            };
        };

        $("#" + stepName).hide();
        $("#step" + (i + 1)).show();
        if (i + 2 == count)
            $(submmitButtonName).show();
        selectStep(i + 1, 'next');
    });
}

So before it goes next, it checks all elements in the current fieldset. Source: Validate between fieldsets

PS don't Forget to enable the Validation, when creating the wizard:

$("#RMAForm").formToWizard({
     submitButton: 'submitMe',
     validationEnabled: true
});