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!

You are not calling `validate()` anywhere in your fiddle. You need to validate the whole form, ignoring anything hidden, and you can check the status of the form at each step. Try validating your form and let us help you from there. — Evan Davis, Jan 02 '13 at 19:48
Alright, I updated the fiddle with the validation and it is working on the last step. http://jsfiddle.net/DHNPz/1/ — user7954, Jan 02 '13 at 20:01

score 4 · Accepted Answer · answered Jan 02 '13 at 20:09

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

score 0 · Answer 2 · edited May 23 '17 at 12:04

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

Making jquery validation work with a form wizard plugin?

2 Answers2