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之后立即进行，以便进行不显眼的验证。有关详细信息，请查看following blog post。

所以在你的情况下，不是在第一个AJAX调用的OnSuccess回调中的警告，而是订阅一个将调用这个方法的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

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

您必须添加对jquery.unobtrusive-ajax.js的引用才能在Ajax Form

中启用验证

这样的事情：

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

Answer 4

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

过去，jquery验证代码中的更改现在可能导致以下问题：

问题是jquery validate plugin首先执行以下行

validate()

表示在调用validate（）时返回验证程序对象，并进一步处理传递的选项。

这也意味着稍后调用执行

的

// Check if a validator for this form was already created
var validator = $.data( this[ 0 ], "validator" );
if ( validator ) {
  return 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

的Javascript

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

-

作为旁注，也可以使用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()

因为这会直接更新验证器的规则而不会产生不显眼的东西。但是，data-val属性变得毫无用处。

Answer 5

此解决方案最适合我。

$.validator.unobtrusive.parse(document);

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

5 个答案: