无干扰的验证不适用于动态内容


96

我在尝试使通俗易懂的jquery验证与通过AJAX调用动态加载的局部视图一起工作时遇到问题。

我已经花了几天时间试图让此代码正常运行。

这是视图:

@model MvcApplication2.Models.test

@using (Html.BeginForm())
{
 @Html.ValidationSummary(true);
 <div id="res"></div>
 <input id="submit" type="submit" value="submit" />
}

部分视图:

@model MvcApplication2.Models.test

@Html.TextAreaFor(m => m.MyProperty);
@Html.ValidationMessageFor(m => m.MyProperty);

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

该模型:

  public class test
  {
    [Required(ErrorMessage= "required field")]
    public int MyProperty { get; set; }
  }

控制器:

    public ActionResult GetView()
    {
        return PartialView("Test");
    }

最后,javascript:

$(doument).ready(function () {
$.ajax({
    url: '/test/getview',
    success: function (res) {

        $("#res").html(res);
        $.validator.unobtrusive.parse($("#res"));
    }
});

$("#submit").click(function () {
    if ($("form").valid()) {
        alert('valid');
        return true;
    } else {
        alert('not valid');
        return false;
    }
});

验证无效。即使我没有在texbox中填写任何信息,submit事件也会显示警报(“有效”)。

但是,如果不是动态加载视图,而是@Html.Partial("test", Model)在主视图中渲染部分视图(并且我不进行AJAX调用),那么验证就可以了。

这可能是因为如果我动态加载内容,则DOM中尚不存在控件。但是我打了一个电话 $.validator.unobtrusive.parse($("#res")); ,应该足以让验证器知道新加载的控件...

有人可以帮忙吗?


我也遇到了同样的问题,但是在mvc 2中。我逐步进行了以下操作:weblogs.asp.net/imranbaloch/archive/2010/07/11/…这也可能对您有所帮助。weblogs.asp.net/imranbaloch/archive/2011/03/05/…希望获得帮助:)
Naresh Parmar

2
注意,该unobtrusive.parse函数将选择器作为参数,而不是元素。
弗雷德(Fred)2016年

Answers:


226

如果您尝试解析已解析的表单,它将不会更新

将动态元素添加到表单时,您可以做的是

  1. 您可以删除表单的验证,然后重新验证,如下所示:

    var form = $(formSelector)
        .removeData("validator") /* added by the raw jquery.validate plugin */
        .removeData("unobtrusiveValidation");  /* added by the jquery unobtrusive plugin*/
    
    $.validator.unobtrusive.parse(form);
    
  2. unobtrusiveValidation使用jquery data方法访问表单的数据:

    $(form).data('unobtrusiveValidation')

    然后访问规则集合并添加新的elements属性(这有些复杂)。

您还可以查看有关将无干扰的jQuery验证应用于ASP.Net MVC中的动态内容的本文,以获得用于向表单添加动态元素的插件。该插件使用第二种解决方案。


17
老兄,你摇滚,彻底拯救了我的一天!很棒的答案!
Dimitar Dimitrov

我担心我应该自己邀请它。该页面上的脚本就像一个超级按钮。
cezarypiatek 2014年

代码很好用-快速更新(如果可能的话)1.我正在使用淘汰赛并很好地获取字段名称,因此看起来像是一个问题。$ .validator.unobtrusive.parseDynamicContent('form'); (以获取所有字段),最后提交时。2.这很好johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native / ...为您提供一种命名字段的方式(这似乎是必需的?我在其他2个之上使用jquery unbtrusive引导程序,所以我情况可能有所不同)
理查德·侯赛姆

请注意,您重新应用表单时$("form").data("validator").settings将应用的所有表单特定设置都将被$(formSelector).removeData("validator")默认设置所删除$.validator.defaults。这是包含动态字段的好方法,但是请确保在每个新的解析过程中重复任何自定义初始化代码。
KyleMit

19

作为Nadeem Khedr的补充...

如果您已将表单动态加载到DOM中,然后调用

jQuery.validator.unobtrusive.parse(form); 

(提到了额外的位),然后打算使用ajax提交该表单,记得要调用

$(form).valid()

在您提交表单之前,它会返回true或false(并运行实际的验证)。


您好,即时通讯面临同样的问题。即时通讯在弹出窗口(jQuery对话框)中显示我的动态视图。无干扰的验证不起作用。在动态视图中或其他位置,我在哪里调用$(form).valid()?
mmssaann

我一直在通过在$(form).submit内部返回false来阻止表单提交,因为我正在执行AJAX提交,但是当验证失败时,我需要一种不调用AJAX提交的方法。$(form).valid()是答案!谢谢!
jgerman

6

将此添加到您的_Layout.cshtml

 $(function () {
        //parsing the unobtrusive attributes when we get content via ajax
        $(document).ajaxComplete(function () {
            $.validator.unobtrusive.parse(document);
        });
    });

3
这是特别低效的。
利亚姆

5

令人惊讶的是,当我查看此问题时,ASP.NET官方文档仍然没有有关非干扰性parse()方法或如何将其与动态内容一起使用的任何信息。我自由地在docs repo 上创建了一个问题(引用@Nadeem的原始答案),并提交了拉取请求以对其进行修复。现在,该信息在模型验证主题的客户端验证部分中可见。


3

测试一下:

if ($.validator.unobtrusive != undefined) {
    $.validator.unobtrusive.parse("form");
}

2

我遇到了同样的问题,除此以外没有任何效果:

$(document).ready(function () { 
    rebindvalidators();
});

function rebindvalidators() {
    var $form = $("#id-of-form");
    $form.unbind();
    $form.data("validator", null);
    $.validator.unobtrusive.parse($form);
    $form.validate($form.data("unobtrusiveValidation").options);
}

并添加

// Check if the form is valid
var $form = $(this.form);
if (!$form.valid())
    return;

您尝试保存表单的位置。

我通过Ajax调用保存表单。

希望这会帮助某人。


1
这是我的工作。最近几天我一直在寻找解决方案,它可以在asp.net core 2中使用。谢谢。
Pradip Rupareliya

0

只需在模态代码的末尾再次复制此代码

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

;)

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.