Question

I am setting up a form with jQuery validation plugin and my form will have a few steps so I am validating the form on each step and on the click of the NEXT button.

The problem is that default “invalidHandler” works only on submit but how to call it if clicked on custom event or any other button but submit (in my case the NEXT button)?

Here is my quick code example:

$(function() {
                $("form").validate({
                    invalidHandler : function(form, validator) {

                        var errors = validator.numberOfInvalids();

                        if(errors) {
                            alert(errors);
                            validator.errorList[0].element.focus();
                        }

                    },
                    rules : {
                        name : 'required'
                    }
                });

                $('#next').click(function() {

                    var element = $('form');
                    var stepIsValid = true;
                    $("input.text").each(function(index) {
                        stepIsValid = element.validate().element($(this)) && stepIsValid;
                    });
                    if(!stepIsValid) {
                        return false;
                    }

                });
            });

and the form with NEXT button:

<form>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" class="text" />
            <input type="button" value="Next" id="next" />
            <input type="submit" />
        </form>

Thank you.

Answer 1

Use .valid() to manually check the status of a form:

$('#next').click(function() {
    var element = $('form');
    if (!element.valid()) {
        return false;
    }
});

More information on valid()