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

96

У меня проблемы с попыткой заставить ненавязчивую проверку 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")); которого должно быть достаточно, чтобы валидатор узнал о вновь загруженных элементах управления ...

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

Сэм
источник
У меня была такая же проблема, но в mvc 2. Я прохожу шаг за шагом: weblogs.asp.net/imranbaloch/archive/2010/07/11/… Это также может вам помочь. weblogs.asp.net/imranbaloch/archive/2011/03/05/… Надеюсь на эту помощь :)
Нареш Пармар
2
Обратите внимание: unobtrusive.parseфункция принимает в качестве аргумента селектор, а не элемент.
Фред

Ответы:

228

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

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

  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 для плагина, используемого для добавления динамических элементов в форму. Этот плагин использует второе решение.

Надим Хедр
источник
17
Чувак, ты молодец, полностью спас мне день! Отличный ответ!
Димитар Димитров
Боялась, что сама приглашаю. Скрипт с этой страницы работает как шарм.
cezarypiatek
Код, отлично работает - быстрое обновление (если можно) 1. Я использую нокаут и получаю имена полей, это похоже на проблему. $ .validator.unobtrusive.parseDynamicContent ('форма'); (чтобы получить все поля), в конце при отправке. 2. Это замечательно johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/…, чтобы дать вам возможность назвать поля (что, кажется, требуется? Я использую ненавязчивую загрузку jquery поверх двух других, поэтому мои обстоятельства, вероятно, другие)
Ричард Хаушам
Просто обратите внимание, что любые настройки формы, к которым вы применили, $("form").data("validator").settingsбудут удалены $(formSelector).removeData("validator")и заменены значениями по умолчанию $.validator.defaultsпри повторном анализе формы. Это отличный способ включить динамические поля, но обязательно повторяйте любой пользовательский код инициализации при каждом новом синтаксическом анализе.
KyleMit
19

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

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

jQuery.validator.unobtrusive.parse(form); 

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

$(form).valid()

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

Марк Ежиковски
источник
привет, я столкнулся с той же проблемой. Я показываю свое динамическое представление во всплывающем окне (диалог jquery). ненавязчивые проверки не работают. где мне вызвать $ (form) .valid () в моем динамическом представлении или где-то еще?
mmssaann
Я всегда предотвращал отправку формы, возвращая false внутри $ (form) .submit, потому что я выполнял отправку AJAX, но тогда мне нужен был способ не вызывать отправку AJAX при неудачной проверке. $ (form) .valid () - это ответ! Спасибо!
jgerman
6

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

 $(function () {
        //parsing the unobtrusive attributes when we get content via ajax
        $(document).ajaxComplete(function () {
            $.validator.unobtrusive.parse(document);
        });
    });
Ахмед Ибрагим
источник
3
Это особенно неэффективно.
Лиам
5

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

Рабадаш8820
источник
3

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

if ($.validator.unobtrusive != undefined) {
    $.validator.unobtrusive.parse("form");
}
Омид-РХ
источник
2

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

$(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.

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

Джей
источник
1
Этот для меня работает. Я находил решение за последние несколько дней, оно работает в ядре asp.net 2. Спасибо.
Pradip Rupareliya
0

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

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

;)

Мохаммад Мираали
источник