title: Jquery MVC 4 Client side Validation Won't Work
body: <p>I'm trying to use the jQuery validation plugin on a simple MVC 4 application - something I've done in MVC 3 with no problems, but I can't get it working at all. </p>
  
  <p>I want the validation to fire when:</p>
  
  <p>1 - my control looses focus .</p>
  
  <p>2- on form submit.</p>
  
  <p>Any ideas on what I've missed would be appreciated !</p>
  
  <p><strong>Script references in _Layout.cshtml</strong></p>
  
  <pre><code>&lt;!-- language-all: lang-html --&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;@ViewBag.Title - AWC Web Console&lt;/title&gt;
      &lt;link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
      &lt;script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  </code></pre>
  
  <p><strong>Index.cshtml markup with validation JS applied in Doc ready function</strong>
      </p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
  
          $(document).ready(function () {
  
          alert("doc ready");
  
          // JQuery client validation
          $("#prodIdFilterForm").validate(
              {
                  onsubmit: true,
                  rules: {
                      productId_str: {required: true, minlength: 10, number:true }
                  },
                  messages: { productId_str: "product Id must be entered" },
                  // Force validation when control looses focus 
                  onfocusout: function (element) {
                      alert("onfocusout");   // not entering this block !
                      $("#productId_str").removeAttr('style');
                      $("#productId_str").valid();   // fire validation
                      $(element).valid();
                  }
                  ,
                  showErrors: function (errorMap, errorList)
                  {
                      if (errorList.length &gt; 0)
                      {
                          for (var i = 0; i &lt; errorList.length; i++)
                          {
                              $("#" + errorList[i].element.id).css({ 'background-color': '#FFDFDF' });
                          }
                      }
                  }
              }   
              );
  
      });  // DocReady
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Body of form markup</strong>
       </p>
  
  <pre class="lang-html prettyprint-override"><code>@{
       ViewBag.Title = "Messages";
       Layout = "~/Views/Shared/_Layout.cshtml";
  }
  
  
  @using ( Html.BeginForm("SelectProduct", "WMSMessages", Model, FormMethod.Post, new {  @id = "prodIdFilterForm"} ) )
  {
     &lt;fieldset class="filtering"&gt;
        &lt;legend&gt;SelectExtensions Product&lt;/legend&gt;
        &lt;div&gt;
           &lt;b&gt;Product Id:&lt;/b&gt;
           @Html.TextBoxFor(model =&gt; model.productId_str, new { @id ="productId_str"}  )
  
           &lt;div class="filterSubmitBox"&gt;
              &lt;input type="submit" value="Show Messages" /&gt;
           &lt;/div&gt;   
        &lt;/div&gt;
     &lt;/fieldset&gt;
  }
  </code></pre>