title: How to setup MVC 5 unobtrusive validation correctly when appending the form from an AJAX call?
body: <p>I have googeld about this issue and I have checked my web.config, bundleconfig and my layout which look like this:
   web.config:</p>
  
  <pre><code>&lt;appSettings&gt;
      &lt;add key="webpages:Version" value="3.0.0.0" /&gt;
      &lt;add key="webpages:Enabled" value="false" /&gt;
      &lt;add key="ClientValidationEnabled" value="true" /&gt;
      &lt;add key="UnobtrusiveJavaScriptEnabled" value="true" /&gt;
  &lt;/appSettings&gt;
  </code></pre>
  
  <p>In my App_Start folder under "BundleConfig.cs":</p>
  
  <blockquote>
  <pre><code>        var jqueryBundle = new ScriptBundle("~/bundles/jquery");
          jqueryBundle.Include("~/Scripts/jquery-{version}.js");
          jqueryBundle.Include("~/Scripts/moment.min.js");
          jqueryBundle.Include("~/Scripts/loadingoverlay.js");
          jqueryBundle.Include("~/Scripts/fullcalendar.js");
          jqueryBundle.Include("~/Scripts/lang-all.js");
          jqueryBundle.Transforms.Add(jsTransformer);
          jqueryBundle.Orderer = nullOrderer;
          bundles.Add(jqueryBundle);
  </code></pre>
    
    <p>var jqueryvalBundle = new ScriptBundle("~/bundles/jqueryval");
                jqueryvalBundle.Include("~/Scripts/jquery.validate*");
                jqueryvalBundle.Include("~/Scripts/jquery.validate.js");
                jqueryvalBundle.Include("~/Scripts/jquery.validate.unobtrusive.js");
                jqueryvalBundle.Transforms.Add(jsTransformer);
                jqueryvalBundle.Orderer = nullOrderer;
                bundles.Add(jqueryvalBundle);</p>
  </blockquote>
  
  <p>in my layout page:</p>
  
  <pre><code>@Scripts.Render("~/bundles/jquery")
  @Scripts.Render("~/bundles/jqueryval")
  @Scripts.Render("~/bundles/bootstrap")
  </code></pre>
  
  <p>Firebug shows:</p>
  
  <p><a href="https://i.stack.imgur.com/5CFXl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5CFXl.png" alt="enter image description here"></a></p>
  
  <p>Thus far everything is included and shouold be running smoothly. </p>
  
  <p>My model:</p>
  
  <pre><code>   [DisplayName("Förnamn")]
      [Required(ErrorMessage = "Vänligen ange ett förnamn")]
      [StringLength(100)]
      public string FirstName { get; set; }
      [DisplayName("Efternamn")]
      [Required(ErrorMessage = "Vänligen ange ett efternamn")]
      [StringLength(100)]
      public string LastName { get; set; }
      [DisplayName("E-post")]
      [Required(ErrorMessage = "Vänligen ange epost")]
      [StringLength(100)]
      [EmailAddress(ErrorMessage = "Ange en korrekt e-postaddress")]
      public string Email { get; set; }
      [DisplayName("Mobil")]
      [DataType(DataType.PhoneNumber)]
      public string PhoenNumber { get; set; }
      [DataType(DataType.Password)]
      [DisplayName("Lösenord")]
      public string PassWord { get; set; }
  </code></pre>
  
  <p>My view:</p>
  
  <pre><code>&lt;div class="col-md-4 col-xs-12"&gt;
          @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "credentialsForm" }))
          {
              @Html.AntiForgeryToken()
  
              &lt;div class="form-horizontal"&gt;
                  @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                  &lt;div class="form-group createCustomerFormGroup"&gt;
                      @Html.LabelFor(model =&gt; model.FirstName, htmlAttributes: new { @class = "control-label col-md-3" })
                      &lt;div class="col-md-9"&gt;
                          @Html.EditorFor(model =&gt; model.FirstName, new { htmlAttributes = new { @class = "form-control", @name = "FirstName" } })
                          @Html.ValidationMessageFor(model =&gt; model.FirstName, "", new { @class = "text-danger" })
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group createCustomerFormGroup"&gt;
                      @Html.LabelFor(model =&gt; model.LastName, htmlAttributes: new { @class = "control-label col-md-3" })
                      &lt;div class="col-md-9"&gt;
                          @Html.EditorFor(model =&gt; model.LastName, new { htmlAttributes = new { @class = "form-control" } })
                          @Html.ValidationMessageFor(model =&gt; model.LastName, "", new { @class = "text-danger" })
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group createCustomerFormGroup"&gt;
                      @Html.LabelFor(model =&gt; model.Email, htmlAttributes: new { @class = "control-label col-md-3" })
                      &lt;div class="col-md-9"&gt;
                          @Html.EditorFor(model =&gt; model.Email, new { htmlAttributes = new { @class = "form-control" } })
                          @Html.ValidationMessageFor(model =&gt; model.Email, "", new { @class = "text-danger" })
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group createCustomerFormGroup"&gt;
                      @Html.LabelFor(model =&gt; model.PassWord, htmlAttributes: new { @class = "control-label col-md-3" })
                      &lt;div class="col-md-9"&gt;
                          @Html.EditorFor(model =&gt; model.PassWord, new { htmlAttributes = new { @class = "form-control" } })
                          @Html.ValidationMessageFor(model =&gt; model.PassWord, "", new { @class = "text-danger" })
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group createCustomerFormGroup"&gt;
                      @Html.LabelFor(model =&gt; model.PhoenNumber, htmlAttributes: new { @class = "control-label col-md-3" })
                      &lt;div class="col-md-9"&gt;
                          @Html.EditorFor(model =&gt; model.PhoenNumber, new { htmlAttributes = new { @class = "form-control" } })
                          @Html.ValidationMessageFor(model =&gt; model.PhoenNumber, "", new { @class = "text-danger" })
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          }
  &lt;/div&gt;
  </code></pre>
  
  <p>a field in the form via firebug:
  <a href="https://i.stack.imgur.com/NDZbE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NDZbE.png" alt="enter image description here"></a></p>
  
  <p>I run this script in firebug and I get no errors even though there should be errors since some of the fields are requiered but they do not have a value:</p>
  
  <pre><code>$("#credentialsForm").validate().numberOfInvalids()
  // retunrs 0
  
  $("#credentialsForm").validate().valid()
  // returns true
  </code></pre>
  
  <p>Ive been at this for hours and im going nuts right now, what am I missing?</p>
  
  <p>EDIT: changed the question from "How to setup MVC 5 unobtrusive validation correctly" to it's current title since it described what I was looking for better than the previous title.</p>