不显眼的验证不适用于 Ajax.BeginForm

Question

我有带有 Model1 的 View，我在其中放置了 Ajax.BeginForm()，在这个 View 中，我有带有 Model2 的 PartialView，我在其中放置了 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 后立即进行，以启用不显眼的验证。查看following blog post了解更多详情。

因此，在您的情况下，不是在第一个 AJAX 调用的 OnSuccess 回调中 alerting，而是订阅将调用此方法的 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

您需要在 Partial View 中添加这两个文件，即使它已经在 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>

或者把它放在你的Partial中：

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

Answer 3

Darin Dimitrov 的答案仅在调用 Ajax 成功处理程序之前未调用 jquery validate plugin 的 validate() 时有效。我想不出可能会出现这种情况的情况，因此我想知道为什么答案被认为是正确的。

也许过去对 jquery 验证代码的更改现在会导致以下问题：

问题是validate()首先执行以下行

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

这意味着当调用 validate() 时返回 validator 对象，并且没有传递选项的进一步处理。

这也意味着稍后对 $.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);