How can I do a conditional success check with the JQuery Validation Plugin?

Question

I am attempting to use the JQuery Validation Plugin but am running in to a small problem. My form uses the following method to hide/show the desired content:

&         


        

Answer 1

The thing you need to do is not let them change pages until the form is valid. The default in jQuery Validate is that only "visible" fields are validated, which will work to your advantage.

You're on the right track with doing a validation before showing the next "layer".

First off, see the example from the documentation.

So the equivalent for you would be to do this:

  //remember to save the validation object like this
  var v = $(".selector").validate({ /* ... */});  

  //then add a click handler for your button
  $("#C1").click(function() {
      //this runs the validation and shows errors if it fails
      if (v.valid()) {
          //only move forward if the validation succeeds
          showLayer('page2');
      }
  });