title: Unobtrusive Client side validation in MVC4 not working
body: <p>I have layout page with all scripts as shown below.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;My Site&lt;/title&gt;
      &lt;link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;some custom css&gt;
      &lt;modernizr&gt;
      &lt;script src="~/Scripts/Jquery/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/Jquery/jquery-ui-1.10.2.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/Jquery/jquery.unobtrusive-ajax.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/Jquery/jquery.validate.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/Jquery/jquery.validate.unobtrusive.js"&gt;&lt;/script&gt;
      &lt;some custom scripts&gt;
      &lt;bootstrap scripts&gt;
      &lt;knockout scripts&gt;           
  &lt;/head&gt;
  &lt;body&gt;
    @RenderBody()
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Then I have my registration Form as shown</p>
  
  <pre><code>@model Mysite.Models.Account.Account
  @{
      Layout = "~/Views/Shared/_Layout.cshtml";
  }
   @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "register" }))
  {
   @Html.AntiForgeryToken();
   &lt;h1&gt;Login&lt;/h1&gt;
   @Html.ValidationSummary();
   @Html.EditorFor(m =&gt; m.Name)
   @Html.EditorFor(m =&gt; m.Address1)
   @Html.EditorFor(m =&gt; m.Address2)
   @Html.EditorFor(m =&gt; m.Phone1)
  &lt;input type="button" value="Register" id="btn1" /&gt;
  }
  &lt;script&gt;
  var form = $("#register");
   $("#btn1").click(function (e) {
          e.preventDefault();
          $.ajax({
              url: 'http://localhost:3885/Account/Register',
              data: form.serialize(),
              type: 'POST',
              success: function (result) {},
              error: function (req, status, error) {
                  function(req, status, error);
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>My Account Model class is as follow :</p>
  
  <pre><code>public class Account
  {
     public Name name {get; set;}
     public Address Address1 {get; set;}
     public Address Address2 {get; set;}
     public Phone Phone1 {get;set;}
  }
  </code></pre>
  
  <p>where each Property is also a model class with its own EditorTemplates for example</p>
  
  <pre><code>public class Name
  {
     [Required]
     public string FirstName {get; set;} 
     public string MiddleName {get; set;}
     [Required]
     public string LastName {get; set;}
  }
  </code></pre>
  
  <p>and have Name.cshtml EditorTemplate as below</p>
  
  <pre><code>&lt;div &gt;
   @Html.TextBoxFor(m=&gt;m.FirstName);
   @Html.TextBoxFor(m=&gt;m.MiddleName);
   @Html.TextBoxFor(m=&gt;m.LastName);
  &lt;div&gt;
  </code></pre>
  
  <p>similarly for Address.cshtml and Phone.cshtml</p>
  
  <p>in web.config: - </p>
  
  <pre><code>&lt;add key="ClientValidationEnabled" value="true" /&gt;
  &lt;add key="UnobtrusiveJavaScriptEnabled" value="true" /&gt;
  </code></pre>
  
  <p>On clicking Register button on empty form it does ajax post to Register [HttpPost] Controller method. Why does it not give me client side validation messages i think its called Unobtrusive validation ? I don't see any errors in console as well.</p>