Поле DataType.MultilineText разорвет всю проверку для моего модального всплывающего окна с частичным видом

Question

У меня очень странная проблема. Я создал новое приложение asp.net mvc5. и я обновляю его до asp.net mvc-5.2.2. Теперь у меня есть следующие поля: -

[Required] 
[StringLength(200)] 
public string Name { get; set; } 

И когда я вынести частичное представление в виде модального всплывающего окна, и я оставить обязательное поле emtoy, я получаю сообщение об ошибке проверки при попытке отправить форму (которая правильно): -

Но странная проблема в том, что, когда я добавил следующую аннотацию данных для моей модели класса: -

[Required] 
     [StringLength(200)] 
     [DataType(DataType.MultilineText)] 
     public string Name { get; set; } 

Затем вся проверка на стороне клиента будет ломаться внутри модального частичного представления. И я смогу представить частичный вид, даже если оставить поле «Имя» пустым (так как не будет отображаться ошибка проверки клиента), но если я удалю [DataType (DataType.MultilineText)], я снова получу проверку. Это очень странная проблема, и я не могу понять, что происходит ...

Вот скрипт, который отвечает за отображение частичного вида в качестве модального всплывающего окна & для проверки частичного представления: -

$(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; 
     }); 
    } 

Я попытался перепроизводить эту проблему на asp.net mvc 5.0, но, похоже, все работает хорошо, может быть, это проблема только в mvc 5.2.2?

EDIT

здесь разметка поля имени внутри всплывающего модального (проверка на стороне клиента не работает на нем): -

<div class="form-group"> 
      <label class="control-label col-md-2" for="Name">Name</label> 
      <div class="col-md-10"> 
       <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"></textarea> 
       <span class="field-validation-error" data-valmsg-for="Name" data-valmsg-replace="true">The Name field is required.</span> 
      </div> 
     </div> 

, а вот когда я вынес его в браузере в качестве полного просмотра (на стороне клиента проверка будет работать): -

<div class="form-group"> 
      <label class="control-label col-md-2" for="Name">Name</label> 
      <div class="col-md-10"> 
       <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"></textarea> 
       <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span> 
      </div> 
     </div> 

и когда я удалить [DataType.MultiLin Etext] аннотация данных разметки будет: -

<div class="form-group"> 
      <label class="control-label col-md-2" for="Name">Name</label> 
      <div class="col-md-10"> 
       <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=""> 
       <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span> 
      </div> 
     </div> 

EDIT2 теперь мой сценарий (skillmanagementgrid) выглядит следующим образом: -

$(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; 
    }); 
} 

и мой индекс Разрез скрипт: -

@section scripts{ 


    @Scripts.Render("~/bundles/jqueryval") 
    <script src="~/Scripts/skillmanagementgrid.js"></script> 
} 

В настоящее время, если я представляю модальное всплывающее окно, оставляя обязательное поле пустым, сценарий «if ($ ('form'). Valid()) «вернется ли это? а также будет возвращено ложное значение return. Но в конце модальный popp будет отправлен, даже если он имеет ошибки проверки. Я на 100% смущен? вы можете понравиться?

EDIT 3 Теперь я обновил свой код следующим образом: -

$(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; 
    } 
    }); 
} 

теперь форма проверки работает, но когда я представить модальное всплывающее окно формы, он будет посылать запрос нормального HTTP POST а не запрос Ajax post ... так что не уверен, как получить эту работу ,,, мне нужно, чтобы оба проверки формы работали & также, чтобы сценарий отправлял запрос ajax-сообщения ... можете ли вы признать, что не так внутри моего кода ? Спасибо

Answer 1

Ну, как я могу видеть, проверка валидации html должна работать в модальном всплывающем окне.

Я думаю, что у вас есть проблема, потому что когда вы предоставляете всплывающее меню вы basicaly изменить DOM с AJAX ответ и ненавязчивой проверки следует разобрать HTML, который был добавлен, я просто не могу видеть его в js. Вы можете сделать это, как это я думаю:

$(function() { 
    $.ajaxSetup({ cache: false }); 
    $("a[data-modal]").on("click", function (e) { 
     $('#myModalContent').load(this.href, function() { 
      $('#myModal').modal({ 
       keyboard: true 
      }, 'show'); 
      // this is how you parse added DOM with form to perform validation 
      // here could be just 'form' selector if you sure that you have only one form 
      $.validator.unobtrusive.parse($("#myModalContent")); 
      bindForm(this); 
     }); 
     return false; 
    }); 
}); 

function bindForm(dialog) { 
    $('form', dialog).submit(function() { 
     if ($('form').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(); 
        } else { 
         $('#progress').hide(); 
         $('#myModalContent').html(result); 
         bindForm(); 
        } 
       } 
      }); 
     } 
     else 
     { 
      return false; 
     } 
    }); 
} 

Теперь о [DataType.MultiLineText] атрибут. Я не вижу никаких проблем в html, поэтому я полагаю, что он тоже должен работать. Но я предпочитаю использовать @Html.TextAreaFor() помощник на View для рендера textarea вместо Attribute, потому что если вы решите его изменить, вы не будете прислушиваться к тому, чтобы уменьшить ваш проект. Вы можете сделать это, как это на ваш View я полагаю:

@Html.TextAreaFor(x => x.Name)