Ненавязчивая проверка не работает с Ajax.BeginForm

Question

У меня есть представление с 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 за ответ.

Answer 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));
};

Answer 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>

Answer 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 становятся бесполезными.

Answer 4

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

Примерно так:

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

Answer 5

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

$.validator.unobtrusive.parse(document);