title: DataType.MultilineText field will break the whole validation for my modal popup partial view
body: <p>I am facing a very strange problem. I have created new asp.net mvc5 application. and I upgrade it to asp.net mvc-5.2.2.
  Now I have the following field:-</p>
  
  <pre><code> [Required]
   [StringLength(200)]
   public string Name { get; set; }
  </code></pre>
  
  <p>And when I render a partial view as a modal popup, and i leave a required field emtoy,  I will get the validation error when trying to submit the form (which is correct) :-</p>
  
  <p><img src="https://i.stack.imgur.com/KR4pw.png" alt="enter image description here"></p>
  
  <p>But the strange problem is that , when I added the following data annotation to my model class:-</p>
  
  <pre><code> [Required]
          [StringLength(200)]
        [DataType(DataType.MultilineText)]
          public string Name { get; set; }
  </code></pre>
  
  <p>Then the whole client side validation will break inside the modal partial view. And I will be able to submit the partial view even when leaving the Name field empty (as no client validation error will be displayed), but if I remove the  [DataType(DataType.MultilineText)] I will get the validation working again..
  This is very strange problem and I can not understand what is going on …</p>
  
  <p>Here is the script which is responsible for displaying the partial view as modal popup &amp; for validating the partial view:-</p>
  
  <pre><code> $(function () {
          $.ajaxSetup({ cache: false });
          $("a[data-modal]").on("click", function (e) {        
              $('#myModalContent').load(this.href, function () {
                  $('#myModal').modal({
                      keyboard: true
                  }, 'show');
  
                  bindForm(this);
              });
              return false;
          });
  
  
      });
  
      function bindForm(dialog) {
          $('form', dialog).submit(function () {
                 var isValid = true; // assume all OK
              $('form').validate(); // perform validation on the form
                $('input[type="text"]').each(function (index, item) { // could change selector to suit e.g $('input, textarea').each(..            
              if (!$(this).valid()) {
                    isValid = false; // signal errors
                       return false; // break out of loop   
                   }
               })
                if (!isValid) {
                    return false; // exit
                }
              $('#progress').show();
              $.ajax({
                  url: this.action,
                  type: this.method,
                  data: $(this).serialize(),
                  success: function (result) {
                      if (result.success) {
                          $('#myModal').modal('hide');
                          $('#progress').hide();
                          location.reload();
                      } else {
                          $('#progress').hide();
                          $('#myModalContent').html(result);
                          bindForm();
                      }
                  }
              });
              return false;
          });
      }
  </code></pre>
  
  <p>i tried re-producing this problem on an asp.net mvc 5.0 but seems everything is working well, could this be a problem inside mvc 5.2.2 only?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>here is the markup for the name field inside the popup modal (the client side validation is not working on it):-</p>
  
  <pre><code>&lt;div class="form-group"&gt;
              &lt;label class="control-label col-md-2" for="Name"&gt;Name&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;textarea class="input-validation-error text-box multi-line" data-val="true" data-val-length="The field Name must be a string with a maximum length of 200." data-val-length-max="200" data-val-required="The Name field is required." id="Name" name="Name"&gt;&lt;/textarea&gt; 
                  &lt;span class="field-validation-error" data-valmsg-for="Name" data-valmsg-replace="true"&gt;The Name field is required.&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>while here is when i rendered it inside the browser as full view (client side validation will work) :-</p>
  
  <pre><code>&lt;div class="form-group"&gt;
              &lt;label class="control-label col-md-2" for="Name"&gt;Name&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;textarea class="text-box multi-line" data-val="true" data-val-length="The field Name must be a string with a maximum length of 200." data-val-length-max="200" data-val-required="The Name field is required." id="Name" name="Name"&gt;&lt;/textarea&gt; 
                  &lt;span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>and when i remove the [DataType.MultiLineText] data annotation the markup will be :-</p>
  
  <pre><code>&lt;div class="form-group"&gt;
              &lt;label class="control-label col-md-2" for="Name"&gt;Name&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;input class="text-box single-line" data-val="true" data-val-length="The field Name must be a string with a maximum length of 200." data-val-length-max="200" data-val-required="The Name field is required." id="Name" name="Name" type="text" value=""&gt; 
                  &lt;span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>EDIT2</strong>
  now my script (skillmanagementgrid) looks as follow:-</p>
  
  <pre><code>$(function () {
      $.ajaxSetup({ cache: false });
      $("a[data-modal]").on("click", function (e) {
          $('#myModalContent').load(this.href, function () {
              $('#myModal').modal({
                  keyboard: false
              }, 'show');
              $("form").removeData("validator");
              $("form").removeData("unobtrusiveValidation");
              $.validator.unobtrusive.parse("form");
              bindForm(this);
          });
          return false;
      });
  
  
  });
  
  function bindForm(dialog) {
      $('form', dialog).submit(function () {
            var isValid = true; // assume all OK
            if ($('form').valid()) { // perform validation on the form
  
                //  $('input[type="text"],input[type="textarea"]').each(function (index, item) { // could change selector to suit e.g $('input, textarea').each(..            
                //       if (!$(this).valid()) {
                //          isValid = false; // signal errors
                //           return false; // break out of loop   
                //  }
                //})
                //       if (!isValid) {
                //         return false; // exit
                //    }
                $('#progress').show();
                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {
                        if (result.success) {
                            $('#myModal').modal('hide');
                            $('#progress').hide();
                            location.reload();
  
                        } else {
  
                            $('#progress').hide();
                            $('#myModalContent').html(result);
                            bindForm();
                        }
                    }
                });
            }
          return false;
      });
  }
  </code></pre>
  
  <p>and my Index view script section is :-</p>
  
  <pre><code>@section scripts{
  
  
      @Scripts.Render("~/bundles/jqueryval") 
    &lt;script src="~/Scripts/skillmanagementgrid.js"&gt;&lt;/script&gt;
  }
  </code></pre>
  
  <p>currently if i submit the modal popup while leaving a required field empty, the script "if ($('form').valid())" will return true ? and also the return false will be called .but at the end the modal popp will be submitted even if it have validation errors. i am 100% confused ? can you please adivce ?</p>
  
  <p><strong>EDIT 3</strong>
  now i have updated my code as follow:-</p>
  
  <pre><code>$(function () {
      $.ajaxSetup({ cache: false });
      $("a[data-modal]").on("click", function (e) {
  
          $('#myModalContent').load(this.href, function () {
              $('#myModal').modal({
                  keyboard: true
              }, 'show');
              $('#myModalContent').removeData("validator");
              $('#myModalContent').removeData("unobtrusiveValidation");
              $.validator.unobtrusive.parse('#myModalContent');
              bindForm(this);
          });
          return false;
      });
  
  
  });
  
  function bindForm(dialog) {
      $('#myModalContent', dialog).submit(function () {
  
          if ($('#myModalContent').valid()) {
              $('#progress').show();
              $.ajax({
                  url: this.action,
                  type: this.method,
                  data: $(this).serialize(),
                  success: function (result) {
                      if (result.success) {
                          $('#myModal').modal('hide');
                          $('#progress').hide();
                          //location.reload();
                          alert('www');
                      } else {
  
                          $('#progress').hide();
                          $('#myModalContent').html(result);
                          bindForm();
                      }
                  }
              });
       }
          else {
             return false;
     }
      });
  }
  </code></pre>
  
  <p>now the form validation is working , but when i submit the modal popup form , it will send a normal http post request and not an Ajax post request... so not sure how to get this working,,, i need to have both form validation working &amp; also to have the Script sending ajax post request... can u adivce what is wrong inside my code?
  Thanks</p>