Q:

How to stop default action of button if validation fails

I have a multi-step form which works by hiding/showing DIV elements within a form depending on which button you clicked (NEXT or BACK).
I'm also using JQuery Validation plugin to validate the form.
All I want to do is have the form validated each time someone clicks on NEXT. Here is my JQuery so far:
$("#Next").bind("click", function(e) {
     $("#myForm").validate();      //validate the form when clicking on next
     $("#FormStepCurrent").hide(); //hide the current div
     $("#FormStepNew").show();     //show the new div
});

So when someone clicks on the button NEXT it triggers the validation and should then show the next div. But if there are validation errors within the currently visible div, how do I prevent it from hiding/showing the currently visible div until the error is fixed?

A:

You can use valid() method. It will run full validation and return a boolean
$("#Next").bind("click", function (e) {
    if (!$("#myForm").valid()) {
        return;
    }    
    $("#FormStepCurrent").hide(); //hide the current div
    $("#FormStepNew").show(); //show the new div
});

valid() method docs

