Ненужная проверка не работает с 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);