title: MVC4 client side validation and ajax
body: <p><strong>Answer:</strong></p>
  
  <p>OK answer supplied below, by @www.innovacall.com is correct, I just didn't read it right the first time, now it works perfectly, thanks.</p>
  
  <p><strong>Original question:</strong></p>
  
  <p>I tried some solutions but none works for me.</p>
  
  <p>In my project, I got a modal popup like this (I use bootstrap):</p>
  
  <pre><code>&lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="skillAnswerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title" id="myModalLabel"&gt;@ViewBag.AddressTimeTableMapModalEditHeaderTitle&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;div id="addSkillAnswerModal"&gt;
              @Html.Partial("_AddSkillAnswer", Model.TempSkillAnswer)
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;@ViewBag.CloseButtonLabel&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary" id="btnAddSkillAnswerModal" &gt;@ViewBag.SaveChangesButtonLabel&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!-- /.modal-content --&gt;
    &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>
  
  <p>I submit data from that popup with the following ajax:</p>
  
  <pre><code>$("#btnAddSkillAnswerModal").click(function () {
      $.ajax({
          url: addSkillUrl,
          type: "POST",
          cache: false,
          async: true,
          traditional: true,
          data: $("#addSkillAnswerModal :input").serialize(),
          dataType: "json",
  
          success: function (result) {
              $("#skillAnswerModal").modal('toggle');
              $("#addSkillAnswerModal input[type!=hidden]").val('');
              $("#IsAnswerVisible").val("true");
  
              oTable.fnReloadAjax();
          }
      });
  });
  </code></pre>
  
  <p>The problem:</p>
  
  <p>Standard @Html.ValidationSummary() helper inside the View rendered in my modal popup, is not being called - thus I have no client side validation. I know that @Html.ValidationSummary() only works when I use @Html.BeginForm(...) but how can I validate my ajax before submit? I tried something like this:</p>
  
  <pre><code>$("#btnAddSkillAnswerModal").click(function () {
      $("#AddSkillAnswerForm").validate({
          debug: true,
          submitHandler: function (form) {
              $.ajax({
                  url: addSkillUrl,
                  type: "POST",
                  cache: false,
                  async: true,
                  traditional: true,
                  data: $("#addSkillAnswerModal :input").serialize(),
                  dataType: "json",
  
                  success: function (result) {
                      $("#skillAnswerModal").modal('toggle');
                      $("#addSkillAnswerModal input[type!=hidden]").val('');
                      $("#IsAnswerVisible").val("true");
  
                      oTable.fnReloadAjax();
                  }
              });
          },
  
          showErrors: function (errorMap, errorList) {
              $("#summary").html("Your form contains "
              + this.numberOfInvalids()
              + " errors, see details below.");
              this.defaultShowErrors();
          }
      });
  });
  </code></pre>
  
  <p>But it's not working, that is: there are no errors, but when I debug the JS, it sort of "skips" the validation, neither submitHandler nor showErrors is being hit...</p>
  
  <p>How can I validate my form before ajax call?</p>
  
  <p>Best regards.</p>
  
  <p>EDIT1:</p>
  
  <p>@www.innovacall.com:</p>
  
  <p>I tried this approach but still it is not working for some reason...</p>
  
  <p>My _AddSkillAnswer partial looks like this:</p>
  
  <pre><code>@model HostessServiceApplication.WebUI.Models.Admin.AgencyAnimatorSkillAnswerListAddSkillAnswer
  
  @using HostessServiceApplication.Common.Localizer
  @using HostessServiceApplication.WebUI.Resources
  @using HostessServiceApplication.WebUI.Resources.Admin
  
  @{
      Layout = null;
  
      //GlobalResources:
      var globalLocalizer = new UniversalTextLocalizer(typeof(TranslationStrings));
      ViewBag.SaveChangesButtonLabel = globalLocalizer.GetTranslatedVariable("SaveChangesButtonLabel");
  
      var viewSpecificLocalizer = new UniversalTextLocalizer(typeof(AddSkillAnswer));
  
      ViewBag.Title = viewSpecificLocalizer.GetTranslatedVariable("AddSkillAnswerPageTitle");
  }
  
  &lt;h2&gt;@ViewBag.Title&lt;/h2&gt;
  
  @using (Html.BeginForm("AddSkillAnswer", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" ,id="AddSkillAnswerForm"}))
  {
      @Html.AntiForgeryToken()
      @Html.ValidationSummary()
  
      @Html.EditorForModel("Admin/AgencyAnimatorSkillAnswerListAddSkillAnswer")
  }
  </code></pre>
  
  <p>I tried the following combinations:</p>
  
  <pre><code>$("#btnAddSkillAnswerModal").click(function () {
      var form = $("#AddSkillAnswerForm");
  
      $.validator.unobtrusive.parse(form);
      //form.validate();
      form.validate({
          debug: true,
          submitHandler: function (form) {
              $.ajax({
                  url: addSkillUrl,
                  type: "POST",
                  cache: false,
                  async: true,
                  traditional: true,
                  data: $("#addSkillAnswerModal :input").serialize(),
                  dataType: "json",
  
                  success: function (result) {
                      $("#skillAnswerModal").modal('toggle');
                      $("#addSkillAnswerModal input[type!=hidden]").val('');
                      $("#IsAnswerVisible").val("true");
  
                      oTable.fnReloadAjax();
                  }
              });
          },
  
          showErrors: function (errorMap, errorList) {
              $("#summary").html("Your form contains "
      + this.numberOfInvalids()
      + " errors, see details below.");
              this.defaultShowErrors();
          }
      });
  });
  </code></pre>
  
  <p>and this:</p>
  
  <pre><code>$("#btnAddSkillAnswerModal").click(function () {
      var form = $("#AddSkillAnswerForm")
      .removeData("validator") /* added by the raw jquery.validate plugin */
      .removeData("unobtrusiveValidation");  /* added by the jquery unobtrusive plugin */
  
      $.validator.unobtrusive.parse(form);
      form.validate({
          debug: true,
          submitHandler: function (form) {
              $.ajax({
                  url: addSkillUrl,
                  type: "POST",
                  cache: false,
                  async: true,
                  traditional: true,
                  data: $("#addSkillAnswerModal :input").serialize(),
                  dataType: "json",
  
                  success: function (result) {
                      $("#skillAnswerModal").modal('toggle');
                      $("#addSkillAnswerModal input[type!=hidden]").val('');
                      $("#IsAnswerVisible").val("true");
  
                      oTable.fnReloadAjax();
                  }
              });
          },
  
          showErrors: function (errorMap, errorList) {
              $("#summary").html("Your form contains "
      + this.numberOfInvalids()
      + " errors, see details below.");
              this.defaultShowErrors();
          }
      });
  });
  </code></pre>
  
  <p>but still it doesn't work, neither submitHandler nor showErrors is being hit.</p>