title: MVC4: jQuery Validation Unobtrusive Native working incorrectly
body: <p>My MVC4 web app is built on Umbraco 7. I have installed the following nuget packages:</p>
  
  <pre><code>jQuery 1.10.2
  jQuery.Validation 1.11.1
  jQuery.Validation.Unobtrusive.Native.MVC4 1.1.0.0
  </code></pre>
  
  <p>The unobtrusive validation is from this website: <a href="http://jqueryvalidationunobtrusivenative.azurewebsites.net/Home/GettingStarted" rel="nofollow">http://jqueryvalidationunobtrusivenative.azurewebsites.net/Home/GettingStarted</a></p>
  
  <p>My view looks like this:</p>
  
  <pre><code>&lt;form id="frmContact" method="post" action="@Url.Action("ContactForm", "ContactFormSurface")"&gt;
  &lt;div&gt;
      &lt;label&gt;Full Name&lt;/label&gt;
      @Html.TextBoxFor(m =&gt; m.FullName, true)
      @Html.ValidationMessageFor(m =&gt; m.FullName, "*")
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label&gt;Company&lt;/label&gt;
      @Html.TextBoxFor(m =&gt; m.Company, true)
      @Html.ValidationMessageFor(m =&gt; m.Company, "*")
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label&gt;Email Address&lt;/label&gt;
      @Html.TextBoxFor(m =&gt; m.EmailAddress, true)
      @Html.ValidationMessageFor(m =&gt; m.EmailAddress, "*")
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label&gt;Message @Html.ValidationMessageFor(m =&gt; m.Message, "*")&lt;/label&gt;
      @Html.TextAreaFor(m =&gt; m.Message, true, 10, 30, new { @class = "input-xl" })
  &lt;/div&gt;
  @Html.ValidationSummary(false, "Please correct the following errors before submitting the message")
  &lt;div&gt;
      &lt;button type="submit"&gt;Send&lt;/button&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>In the web.config:</p>
  
  <pre><code>    &lt;add key="ClientValidationEnabled" value="true"/&gt;
      &lt;add key="UnobtrusiveJavaScriptEnabled" value="true"/&gt;
  </code></pre>
  
  <p>My model:</p>
  
  <pre><code>public class ContactFormViewModel
  {
      [Required, Display(Name = "Full Name")]
      public string FullName { get; set; }
  
      public string Company { get; set; }
  
      [Required, Display(Name = "Email Address")]
      [RegularExpression(@"^(?!\.)(""([^""\r\\]|\\[""\r\\])*""|([-a-z0-9!#$%&amp;'*+/=?^_`{|}~]|(?&lt;!\.)\.)*)(?&lt;!\.)@[a-z0-9][\w\.-]*[a-z0-9]\.[a-z][a-z\.]*[a-z]$", ErrorMessage="Not a valid email address")]
      public string EmailAddress { get; set; }
  
      [Required]
      [DataType(DataType.MultilineText)]
      public string Message { get; set; }
  }
  </code></pre>
  
  <p>Here's the scripts (which I have confirmed loads correctly in the browser)</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The rendered HTML looks like this (at initial page load):</p>
  
  <pre><code>&lt;form action="/umbraco/Surface/ContactFormSurface/ContactForm" method="post" id="frmContact"&gt;
  &lt;div&gt;
      &lt;label&gt;Full Name&lt;/label&gt;
      &lt;input type="text" value="" name="FullName" id="FullName" data-rule-required="true" data-msg-required="The Full Name field is required." class="input-validation-error"&gt;
      &lt;span data-valmsg-replace="false" data-valmsg-for="FullName" class="field-validation-error"&gt;*&lt;/span&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label&gt;Company&lt;/label&gt;
      &lt;input type="text" value="" name="Company" id="Company"&gt;
      &lt;span data-valmsg-replace="false" data-valmsg-for="Company" class="field-validation-valid"&gt;*&lt;/span&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label&gt;Email Address&lt;/label&gt;
      &lt;input type="text" value="" name="EmailAddress" id="EmailAddress" data-rule-required="true" data-rule-regex="{&amp;quot;pattern&amp;quot;:&amp;quot;^(?!\\.)(\&amp;quot;([^\&amp;quot;\\r\\\\]|\\\\[\&amp;quot;\\r\\\\])*\&amp;quot;|([-a-z0-9!#$%&amp;amp;'*+/=?^_`{|}~]|(?&amp;lt;!\\.)\\.)*)(?&amp;lt;!\\.)@[a-z0-9][\\w\\.-]*[a-z0-9]\\.[a-z][a-z\\.]*[a-z]$&amp;quot;}" data-msg-required="The Email Address field is required." data-msg-regex="Not a valid email address" class="input-validation-error"&gt;
      &lt;span data-valmsg-replace="false" data-valmsg-for="EmailAddress" class="field-validation-error"&gt;*&lt;/span&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label&gt;Message &lt;span data-valmsg-replace="false" data-valmsg-for="Message" class="field-validation-error"&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;textarea rows="10" name="Message" id="Message" data-rule-required="true" data-msg-required="The Message field is required." cols="30" class="input-validation-error input-xl"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div data-valmsg-summary="true" class="validation-summary-errors"&gt;&lt;span&gt;Please correct the following errors before submitting the message&lt;/span&gt;
          &lt;ul&gt;
              &lt;li&gt;The Full Name field is required.&lt;/li&gt;
              &lt;li&gt;The Email Address field is required.&lt;/li&gt;
              &lt;li&gt;The Message field is required.&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;div&gt;
      &lt;button type="submit"&gt;Send&lt;/button&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>As you might see, the validation text is already at an invalid state at load time (before any keypresses or form submissions). Also, when I submit the empty form it submits back to the server, so client side validation doesn't actually happen. The jQuery validation scripts run, since the company field is not required and is reflected so in the validation message's class attribute (<code>'field-validation-valid'</code>)</p>
  
  <p><strong>EDIT</strong>:
  Controller code as requested:</p>
  
  <pre><code>    public class ContactFormSurfaceController: Umbraco.Web.Mvc.SurfaceController
      {
          [HttpGet]
          public ActionResult ContactForm(ContactFormViewModel model)
          {
              return PartialView("ContactForm", new ContactFormViewModel());
          }
      }
  </code></pre>
  
  <p>Can anybody help me out here? Thanks in advance.</p>