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

У меня возникают проблемы с попыткой получить ненавязчивую проверку 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;
    }
});

Валидация не работает. Даже если я не заполняю какую-либо информацию в texbox, событие submit показывает предупреждение ( "valid" ).

Однако, если вместо динамического представления представления я использую @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);

Получите доступ к данным формы unobtrusiveValidation с помощью метода jquery data:
```
$(form).data('unobtrusiveValidation')
```
то доступ к коллекции правил и добавление новых атрибутов элементов (что несколько сложно).

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

Ответ 2

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

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

jQuery.validator.unobtrusive.parse(form);

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

$(form).valid()

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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