title: Client side validation in asp.net mvc
body: <p>I am pretty new to asp.net MVC. I have a problem in attaching client side validation errors to validation summary list in MVC. On the client side submit click function, the validation-summary-errors div is always empty even if there are validation errors in form.</p>
  
  <p>Let me explain in detail with code snippet.The snippet that I have provided is my sample application.</p>
  
  <p>I have enabled clientside validation in my application trhough web.config and included the default jquery validations library in my layout page.</p>
  
  <pre><code>@Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/jqueryui")
      @Scripts.Render("~/bundles/jqueryval")
  </code></pre>
  
  <p>MVC View</p>
  
  <pre><code>@using (Html.BeginForm()) {
      @Html.AntiForgeryToken()
      @Html.ValidationSummary()
  
      &lt;fieldset&gt;
          &lt;legend&gt;Registration Form&lt;/legend&gt;
          &lt;ol&gt;
              &lt;li&gt;
                  @Html.LabelFor(m =&gt; m.UserName)
                  @Html.TextBoxFor(m =&gt; m.UserName)
              &lt;/li&gt;
              &lt;li&gt;
                  @Html.LabelFor(m =&gt; m.Password)
                  @Html.PasswordFor(m =&gt; m.Password)
              &lt;/li&gt;
              &lt;li&gt;
                  @Html.LabelFor(m =&gt; m.ConfirmPassword)
                  @Html.PasswordFor(m =&gt; m.ConfirmPassword)
              &lt;/li&gt;
          &lt;/ol&gt;
          &lt;input type="submit" value="Register" id="btnSubmit" /&gt;
      &lt;/fieldset&gt;
  }
  </code></pre>
  
  <p>View Model is below</p>
  
  <pre><code>public class RegisterModel
      {
          [Required]
          [Display(Name = "User name")]
          public string UserName { get; set; }
  
          [Required]
          [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
          [DataType(DataType.Password)]
          [Display(Name = "Password")]
          public string Password { get; set; }
  
          [DataType(DataType.Password)]
          [Display(Name = "Confirm password")]
          [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
          public string ConfirmPassword { get; set; }
      }
  </code></pre>
  
  <p>Script file that I have used is below.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function () {
          $("#btnSubmit").click(function (e) {
              e.preventDefault();            
              var errorSummary = $('.validation-summary-errors');
              if (errorSummary.length == 0) {
                  $('#listError').remove();
                  $('&lt;div class="validation-summary-errors"&gt;&lt;/div&gt;').insertAfter($('.validation-summary-valid'));
                  $(".validation-summary-errors").append("&lt;ul id='listError'&gt;&lt;li&gt;You cannot enter more than 20 characters.&lt;/li&gt;&lt;/ul&gt;");
              }
              else if (errorSummary.length == 1) {
                  $('#listError').remove();
                  $(".validation-summary-errors").append("&lt;ul id='listError'&gt;&lt;li&gt;You cannot enter more than 20 characters.&lt;/li&gt;&lt;/ul&gt;");
              }
              return false;
          });
  
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>When I don't have jquery submit click function everything works fine as expected. Model valiadtions are fired in client side on submit click.</p>
  
  <p>In addition to model validations I also have some jquery client side validations that need to be appended to existing list of validation summary. But "validation-summary-errors" div is always empty in submit click function. So every time the $('.validation-summary-errors').length is 0.</p>
  
  <p>Can someone help me understand where am I going wrong? </p>
  
  <p><strong>Updated code</strong></p>
  
  <pre><code>$(function () {
      $("#btnSubmit").click(function (e) {
  
          var IsValid = validateForms();
          if (!IsValid) {
              e.preventDefault();
          }
      });
  });
  
  function validateForms() {
  
      var blnValid = false;
      var valMsg = ValidateDynamicControls();
  
      if ($('#MemberForm').valid()) {
          $(".validation-summary-errors").empty();
          blnValid = true;
      }
      if (valMsg != '') {
  
          blnValid = false;
          var errorSummary = $('.validation-summary-errors')
          if (errorSummary.length == 1 &amp;&amp; errorSummary[0].innerHTML != '' &amp;&amp;    errorSummary[0].innerHTML != undefined) {
              $(".validation-summary-errors ul").append(valMsg);
          } else {
  
              $('#listError').remove();
              $('&lt;div class="validation-summary-errors"&gt;&lt;/div&gt;').insertAfter($('.validation-summary-valid'));
              $(".validation-summary-errors").append("&lt;ul id='listError'&gt;" + valMsg + "&lt;/ul&gt;");
          }
      }
  
      return blnValid;
  }
  
  function ValidateDynamicControls() {
      var strAliasValMsg = 'The string is not valid.';
  
      return strAliasValMsg;
  }
  </code></pre>