ненавязчивая проверка не работает с динамическим контентом

У меня проблемы с попыткой заставить ненавязчивую проверку jquery работать с частичным представлением, которое загружается динамически через вызов AJAX.

Я целыми днями пытался заставить этот код работать, но безуспешно.

Вот вид:

@model MvcApplication2.Models.test

@using (Html.BeginForm())
{
 @Html.ValidationSummary(true);
 <div id="res"></div>
 <input id="submit" type="submit" value="submit" />
}

Частичный вид:

@model MvcApplication2.Models.test

@Html.TextAreaFor(m => m.MyProperty);
@Html.ValidationMessageFor(m => m.MyProperty);

<script type="text/javascript" >
  $.validator.unobtrusive.parse(document);
</script>

Модель:

  public class test
  {
    [Required(ErrorMessage= "required field")]
    public int MyProperty { get; set; }
  }

Контроллер:

    public ActionResult GetView()
    {
        return PartialView("Test");
    }

и, наконец, javascript:

$(doument).ready(function () {
$.ajax({
    url: '/test/getview',
    success: function (res) {

        $("#res").html(res);
        $.validator.unobtrusive.parse($("#res"));
    }
});

$("#submit").click(function () {
    if ($("form").valid()) {
        alert('valid');
        return true;
    } else {
        alert('not valid');
        return false;
    }
});

Проверка не работает. Даже если я не заполняю текстовое поле какой-либо информацией, событие отправки показывает предупреждение («действительно»).

Однако, если вместо динамической загрузки представления я использую @Html.Partial("test", Model)для рендеринга частичного представления в основном представлении (и я не выполняю вызов AJAX), тогда проверка работает нормально.

Вероятно, это связано с тем, что если я загружаю контент динамически, элементы управления еще не существуют в DOM. Но я делаю вызов, $.validator.unobtrusive.parse($("#res")); которого должно быть достаточно, чтобы валидатор узнал о вновь загруженных элементах управления ...

Кто-нибудь может помочь?

Если вы попытаетесь разобрать уже проанализированную форму, она не обновится.

Что вы можете сделать, добавив динамический элемент в форму, это либо

1. Вы можете удалить проверку формы и повторно проверить ее следующим образом:

   var form = $(formSelector)
       .removeData("validator") /* added by the raw jquery.validate plugin */
       .removeData("unobtrusiveValidation");  /* added by the jquery unobtrusive plugin*/
   
   $.validator.unobtrusive.parse(form);
   

2. Доступ к unobtrusiveValidationданным формы с помощью dataметода jquery :

   $(form).data('unobtrusiveValidation')

   затем получите доступ к коллекции правил и добавьте новые атрибуты элементов (что несколько сложно).

Вы также можете ознакомиться с этой статьей о применении ненавязчивой проверки jquery к динамическому контенту в ASP.Net MVC для плагина, используемого для добавления динамических элементов в форму. Этот плагин использует второе решение.

В дополнение к ответу Надима Хедра ....

Если вы загрузили форму в DOM динамически, а затем вызываете

jQuery.validator.unobtrusive.parse(form); 

(с указанными дополнительными битами), а затем собираются отправить эту форму с помощью ajax, не забудьте вызвать

$(form).valid()

который возвращает истину или ложь (и выполняет фактическую проверку) перед отправкой формы.

добавьте это в свой _Layout.cshtml

 $(function () {
        //parsing the unobtrusive attributes when we get content via ajax
        $(document).ajaxComplete(function () {
            $.validator.unobtrusive.parse(document);
        });
    });

Удивительно, но когда я просматривал этот вопрос, в официальных документах ASP.NET все еще не было информации о ненавязчивом parse()методе или о том, как его использовать с динамическим контентом. Я взял на себя смелость создать проблему в репозитории документации (со ссылкой на исходный ответ @ Nadeem) и отправил запрос на перенос, чтобы исправить ее. Эта информация теперь отображается в разделе проверки на стороне клиента раздела проверки модели.

проверить это:

if ($.validator.unobtrusive != undefined) {
    $.validator.unobtrusive.parse("form");
}

Я столкнулся с той же проблемой, и ничего не работало, кроме этого:

$(document).ready(function () { 
    rebindvalidators();
});

function rebindvalidators() {
    var $form = $("#id-of-form");
    $form.unbind();
    $form.data("validator", null);
    $.validator.unobtrusive.parse($form);
    $form.validate($form.data("unobtrusiveValidation").options);
}

и добавить

// Check if the form is valid
var $form = $(this.form);
if (!$form.valid())
    return;

где вы пытаетесь сохранить форму.

Я сохранял форму через вызов Ajax.

Надеюсь, это кому-то поможет.

просто скопируйте этот код еще раз в конец модального кода

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

;)