title: MVC 4 client side validation not working
body: <p>Can anyone tell me why client side validation is not working in my MVC 4 application.</p>
  <h3>_layout.schtml</h3>
  <pre><code>@Scripts.Render(&quot;~/bundles/jquery&quot;)
  @RenderSection(&quot;scripts&quot;, required: false)
  </code></pre>
  <p>In my web.config I have:</p>
  <pre><code>&lt;appSettings&gt;
     &lt;add key=&quot;ClientValidationEnabled&quot; value=&quot;true&quot; /&gt;
     &lt;add key=&quot;UnobtrusiveJavaScriptEnabled&quot; value=&quot;true&quot; /&gt;
  &lt;/appSettings&gt;
  </code></pre>
  <p>In my login.cshtml page I have:</p>
  <pre><code>@using (Html.BeginForm())
  {
      &lt;div class=&quot;formscontent&quot;&gt;
  
          &lt;ol&gt;
              &lt;li&gt;
                  @Html.LabelFor(x =&gt; x.AgreementNumber)
                  &lt;br /&gt;
                  @Html.TextBoxFor(x =&gt; x.AgreementNumber, new { size = &quot;30&quot; })
                  &lt;br /&gt;
                  @Html.ValidationMessageFor(m =&gt; m.AgreementNumber)
                  &lt;br /&gt;
                  &lt;br /&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  @Html.LabelFor(x =&gt; x.UserName)
                  &lt;br /&gt;
                  @Html.TextBoxFor(x =&gt; x.UserName, new { size = &quot;30&quot; })
                  &lt;br /&gt;
                  @Html.ValidationMessageFor(m =&gt; m.UserName)
                  &lt;br /&gt;
                  &lt;br /&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  @Html.LabelFor(x =&gt; x.Password)
                  &lt;br /&gt;
                  @Html.PasswordFor(x =&gt; x.Password, new { size = &quot;30&quot; })
                  &lt;br /&gt;
                  @Html.ValidationMessageFor(m =&gt; m.Password)
                  &lt;br /&gt;
                  &lt;br /&gt;
              &lt;/li&gt;
          &lt;/ol&gt;
  
      &lt;/div&gt;
      
      &lt;ol&gt;
          &lt;li&gt;
              @Html.CheckBoxFor(m =&gt; m.RememberMe)
              @Html.LabelFor(m =&gt; m.RememberMe, new { @class = &quot;checkbox&quot; })
          &lt;/li&gt;
      &lt;/ol&gt;
      
      &lt;br /&gt;
      
      &lt;input class=&quot;mainbutton&quot; type=&quot;submit&quot; value=&quot;@Model.Localisation.TranslateHtmlString(&quot;LogonBtn&quot;)&quot; /&gt;&lt;br /&gt;
      &lt;div style=&quot;text-align: left; padding: 0 5px 5px 10px;&quot;&gt;
          Forgot login-info? clik &lt;a class=&quot;link&quot; href=&quot;@Url.Action(&quot;Index&quot;, &quot;Credentials&quot;)&quot;&gt;here.&lt;/a&gt;
      &lt;/div&gt;
      
  }
  </code></pre>
  <p>In the bottom of login page:</p>
  <pre><code>@section Scripts {
    @Scripts.Render(&quot;~/bundles/jqueryval&quot;)
  }
  </code></pre>
  <p>JavaScript is enabled in my browser. In the MVC 4 template project from Visual Studio client validation works fine.</p>
  <p>Running the application, on login page when viewing page source, I see this rendered:</p>
  <pre><code>&lt;label for=&quot;AgreementNumber&quot;&gt;number&lt;/label&gt;
  &lt;br /&gt;
  &lt;input id=&quot;AgreementNumber&quot; name=&quot;AgreementNumber&quot; size=&quot;30&quot; type=&quot;text&quot; value=&quot;387893&quot; /&gt;
  &lt;br /&gt;
  &lt;span class=&quot;field-validation-valid&quot; data-valmsg-for=&quot;AgreementNumber&quot; data-valmsg-  replace=&quot;true&quot;&gt;&lt;/span&gt;
  </code></pre>
  <p>and in this in the bottom:</p>
  <pre><code>&lt;script src=&quot;/BMWebsite/Scripts/jquery.unobtrusive-ajax.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;/BMWebsite/Scripts/jquery.validate.inline.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;/BMWebsite/Scripts/jquery.validate.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;/BMWebsite/Scripts/jquery.validate.unobtrusive.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>My model properties are annotated:</p>
  <pre><code>public class LogonModel : ModelBase
  {
      [MyRequired(&quot;AgreementNumberRequiredProperty&quot;)]
      [MyDisplay(&quot;AgreementNumberLabel&quot;)]
      public string AgreementNumber { get; set; }
  
      [MyRequired(&quot;UserNameRequiredProperty&quot;)]
      [MyDisplay(&quot;UserNameLabel&quot;)]
      public string UserName { get; set; }
  
      [MyRequired(&quot;PasswordRequiredProperty&quot;)]
      [DataType(DataType.Password)]
      [MyDisplay(&quot;PasswordLabel&quot;)]
      public string Password { get; set; }
  
      [MyDisplay(&quot;RememberMeCheckBox&quot;)]
      public bool RememberMe { get; set; }
  }
  </code></pre>
  <p><code>MyRequired</code> is a class derived from the regular RequiredAttribute. The reason is that my error messages are localised by overriding the <code>FormatErrorMessage(string name)</code> method of the <code>RequiredAttribute</code> class. And it works fine - My labels and error messages are localized.</p>
  <h3>MyRequired.cs</h3>
  <pre><code>public class MyRequiredAttribute : RequiredAttribute
  {
      private readonly string _errorMessagekey;
  
      public MyRequiredAttribute(string errorMessage)
      {
          _errorMessagekey = errorMessage;
      }
  
      public override string FormatErrorMessage(string name)
      {
          var translation = HttpContext.Current.Session[&quot;translation&quot;] as LocalisationHelper;
  
          return translation != null ? translation.Translate(_errorMessagekey) : ErrorMessage;
      }
  }
  </code></pre>
  <p>I put a breakpoint in the POST version of my login action method, and it is being hit. The form is posted to server where server side validation happens. Client side validation doesn't happen.</p>
  <p>What am I missing?</p>
  <p>Thank you.</p>