ASP.NET MVC Wizard and xVal validation

Question

I'm building a wizard-style application in ASP.NET MVC and is wondering if you have any feedback on my current approach.

Each step of the wizard is a partial view (user control) wrapped by a DIV. All DIV's are shown on the same view (Create.aspx). I then use jQuery to go to next or previous step - in other words hide or show a specific DIV.

It works great, but now I need to implement validation. So I've implemented xVal, but currently the validation only occurs when the form is submitted on the final step of the wizard.

Instead I would like to validate my model as I go, so that I cannot go forward to step 2 if the input in step 1 was invalid.

Basicly I'd like to invoke the xVal validation process, when I'm about to switch to the next step.

Any thoughts on how to go about doing that?

Thank you.

Answer 1

xVal is built with support for jQuery's Validation plugin right out of the gate. You should be able to work with the plug-in's API to call the Validate() and Valid() methods whenever you need to.

For example, on each "move to next step" button click, you could call valid() on each input in the current step, to see if you should proceed or not.

$("#myform").validate();
$("a.nextstep").click(function() {
  if (!$("#input1").valid());
  return false;
});