title: How to use asp.net mvc 3 unobtrusive javascript validation with a wizard?
body: <p>I am using asp.net mvc 3 and want to make use of <a href="http://amadiere.com/blog/2011/06/unobtrusive-javascript-in-asp-net-mvc3-with-jquery/" rel="nofollow">unobtrusive javascript </a>. I am desiging a form that is quite long and probably would be very overwhelming if not broken up.</p>
  
  <p>I decided to use <a href="https://github.com/thecodemine/formwizard" rel="nofollow">jquery form wizard</a> to break it into a wizard that should not look so overwhelming. I am not wondering how do I use the data annotations and unobtrusive java-script with wizard.</p>
  
  <p>Right now everything is still in one big form but just looks broken up through the wizard. There is only one submit button at the end of the form that when clicked will serialize the form data and do an ajax post to the server with that data.</p>
  
  <p>From what I seen usually for the first time when using the mvc validation the user needs to click the submit button before any of the client side validation gets trigger. I am wondering if it is possible to do it once they leave the field as it going to confuse the user once they hit submit and nothing happens and then they have to go through the entire wizard again to find the validation errors. </p>
  
  <p>It would be nice to inform them right away when they make a mistake.</p>
  
  <p>I know that jquery wizard using the jquery form plugin that has validation but I rather try to stick with one method if possible to keep the code consistent. </p>
  
  <p><strong>Edit</strong></p>
  
  <p>This is what I have on the submit button</p>
  
  <pre><code>$('#frm').live('submit', function (event) {
      event.preventDefault();
  
      var $thisFrm = $(this);
  
      ValidatorParse($thisFrm);//jQuery.validator.unobtrusive.parse(selector);
      var clientCheck = $($thisFrm).validate().form();
  
      if (clientCheck) {
         // ajax post(server side validation will happen.If it does not pass serverside I send it back usually as json).
      }
  });
  </code></pre>
  
  <p>So I see a couple problems with this. First the validation only will really get triggered on submit. If it gets triggered and the validation error is on the second wizard step the user won't see it(unless some how can figure out way to find the first wrong validation error and switch them to that step).</p>
  
  <p>The second problem I see is that they have to wait till the end to see if they have validation errors. I rather let them know asap.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>It seems the wizard uses jquery validate but for some reason it is not working with mvc jquery validate way.</p>
  
  <p>With more investigation I found that the wizard needs to see "required" as a class to trigger</p>
  
  <pre><code>// will trigger validation
  &lt;input type="text" value="" name="AnnualFee" id="AnnualFee"
      data-val-required="Annual Fee Required" 
      data-val="true" 
      class="required ui-wizard-content ui-helper-reset ui-state-default error"&gt;
  
  // will not trigger validation
      &lt;input type="text" value="" name="AnnualFee" id="AnnualFee" 
      data-val-required="Annual Fee Required" 
      data-val="true" 
      class="ui-wizard-content ui-helper-reset ui-state-default"&gt;
  </code></pre>
  
  <p>I don't see in the documentation for jquery validate them ever using the class to validate the form. Is this something the person made up?</p>