ненав’язлива перевірка не працює з динамічним вмістом

У мене проблеми, намагаючись змусити ненав’язливу перевірку 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()

який повертає true або false (і запускає фактичну перевірку) перед тим, як подати форму.

додайте це до вашого _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>

;)