Ненужная проверка не работает с Ajax.BeginForm

У меня есть View with Model1, где я помещаю Ajax.BeginForm(), и в этом представлении у меня есть PartialView с Model2, где я помещаю Ajax.BeginForm(). Так что только в первой форме работает unobtrusive validation. Почему только в первой форме работает валидация?

первый просмотр

@model Model1

@using (Ajax.BeginForm("Action1","Controller",null,new AjaxOption(){ onSuccess = "alert('=)')"},null)
{

   <intput type="submit" value="Save" />
}


Model2 model2 = new Model2();
@Html.EditorFor(m=>model2)

** В представлении Model2 у меня есть. **

@model Model2 
@using (Ajax.BeginForm("AddStreet","Controller",new AjaxOption(){onSuccess = "alert('=)'")},option,null)
{

        @Html.LabelFor(m => Model.Name):
        @Html.TextBoxFor(m => Model.Name)
        @Html.ValidationMessageFor(m => Model.Name)

       <intput type="submit" value="Save" />
}

Спасибо @Darin Dimitrov за ответ.

Ответ 1

Это потому, что второе представление загружается AJAX на более позднем этапе, и вам нужно позвонить $.validator.unobtrusive.parse(...) сразу после того, как его содержимое вводится в DOM, чтобы обеспечить ненавязчивую проверку. Подробнее см. после сообщения в блоге.

Итак, в вашем случае вместо предупреждения в обратном вызове OnSuccess первого вызова AJAX подпишитесь на функцию javascript, которая вызовет этот метод:

@using (Ajax.BeginForm(
    "Action1",
    "Controller",
    null,
    new AjaxOptions { 
        OnSuccess = "onSuccess",
        UpdateTargetId = "result"
    },
    null)
)
{
    <input type="submit" value="Save" />
}

а затем в файле javascript:

var onSuccess = function(result) {
    // enable unobtrusive validation for the contents
    // that was injected into the <div id="result"></div> node
    $.validator.unobtrusive.parse($(result));
};

Ответ 2

Вам нужно добавить эти 2 файла в Частичный просмотр, даже если он уже находится в Shared/_Layout.cshtml:

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

Или поместите это в свой Частичный:

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

Ответ 3

Ответ дарина Димитрова работает только тогда, когда validate() из jquery validate plugin не вызывается до тех пор, пока не будет вызван обработчик успеха Ajax. Я не могу придумать сценарий, в котором это могло бы иметь место, поэтому я удивляюсь, почему ответ был принят как правильный.

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

Проблема в том, что validate() сначала выполняет следующую строку

// Check if a validator for this form was already created
var validator = $.data( this[ 0 ], "validator" );
if ( validator ) {
  return validator;

что означает, что объект-валидатор возвращается при вызове validate() без дальнейшей обработки параметров, переданных.

Это также означает, что более поздний вызов $.validator.unobtrusive.parse(...) или $.validator.unobtrusive.parseElement(...), который выполняет

$form.validate(this.options) <- this.options holds the new rules parsed from HTML

обновить параметры валидатора не имеет никакого эффекта, потому что эти параметры не обрабатываются вообще.

Решением здесь является обновление валидатора вручную, например,

var $htmlCode = $("your html");

$.validator.unobtrusive.parse($htmlCode, true); // true means no validate() call

// now get the validation info collected in parse()
var validationInfo = $form.data("unobtrusiveValidation"); 

var $validator = $form.validate(); // get validator and ...
$validator.settings.rules = validationInfo.options.rules; // ... update its rules
$validator.settings.messages = validationInfo.options.messages; // ... update its messages

Повторная проверка формы (например, нажав "Отправить") теперь должна привести к ожидаемым результатам.

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

Бритва

@using (Ajax.BeginForm(
    "Action1",
    "Controller",
    null,
    new AjaxOptions { 
        OnSuccess = "onSuccess",
        UpdateTargetId = "result"
    },
    null)
)
{
    <input type="submit" value="Save" />
}

Javascript

var onSuccess = function(result) {
    var $htmlCode = $(result);

    $.validator.unobtrusive.parse($htmlCode, true); // true means no validate() call

    // now get the validation info collected in parse()
    var validationInfo = $form.data("unobtrusiveValidation"); 

    var $validator = $form.validate(); // get validator and ...
    $validator.settings.rules = validationInfo.options.rules; // ... update its rules
    $validator.settings.messages = validationInfo.options.messages; // ... update its messages
};

В качестве примечания, ручное обновление валидатора также возможно с помощью метода rules(), например

$yourHtmlField.rules( "add", {
  required: true,
  messages: {
    required: "Required input"
  }
});

так как это напрямую обновляет правила валидатора без ненавязчивых вещей. Но тогда атрибуты data-val становятся бесполезными.

Ответ 4

Вам нужно добавить ссылку на jquery.unobtrusive-ajax.js, чтобы включить проверку в Ajax Form

Что-то вроде этого:

<script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.js"></script>

Ответ 5

Это решение работало лучше всего для меня.

$.validator.unobtrusive.parse(document);