不显眼的验证不适用于动态内容 [英] unobtrusive validation not working with dynamic content

问题描述

我在尝试使用不显眼的 jquery 验证来处理通过 AJAX 调用动态加载的部分视图时遇到问题.

I'm having problems trying to get the unobtrusive jquery validation to work with a partial view that is loaded dynamically through an AJAX call.

我花了几天时间试图让这段代码正常工作，但没有成功.

I've been spending days trying to get this code to work with no luck.

这是视图:

@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:

and finally, the 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;
    }
});

验证不起作用.即使我没有在文本框中填写任何信息，提交事件也会显示警报('有效').

The validation does not work. Even if I don't fill any information in the texbox, the submit event shows the alert ('valid').

然而，如果不是动态加载视图，我使用 @Html.Partial("test", Model) 在主视图中渲染局部视图(我不做AJAX 调用)，则验证工作正常.

However, if instead of loading dynamically the view, I use @Html.Partial("test", Model) to render the partial View in the main View (and I don't do the AJAX call), then the validation works just fine.

这可能是因为如果我动态加载内容，DOM 中尚不存在控件.但是我调用了 $.validator.unobtrusive.parse($("#res")); 这应该足以让验证器了解新加载的控件......

This is probably because if I load the content dynamically, the controls don't exist in the DOM yet. But I do a call to $.validator.unobtrusive.parse($("#res")); which should be enough to let the validator about the newly loaded controls...

有人可以帮忙吗?

推荐答案

如果你尝试解析一个已经被解析的表单，它不会更新

If you try to parse a form that is already parsed it won't update

当你向表单添加动态元素时你可以做的是

What you could do when you add dynamic element to the form is either

1. 您可以删除表单的验证并像这样重新验证它:

1. You could remove the form's validation and re validate it like this:

var form = $(formSelector)
    .removeData("validator") /* added by the raw jquery.validate plugin */
    .removeData("unobtrusiveValidation");  /* added by the jquery unobtrusive plugin*/

$.validator.unobtrusive.parse(form);

使用 jquery data 方法访问表单的 unobtrusiveValidation 数据:

Access the form's unobtrusiveValidation data using the jquery data method:

$(form).data('unobtrusiveValidation')

然后访问规则集合并添加新的元素属性(这有点复杂).

then access the rules collection and add the new elements attributes (which is somewhat complicated).

您还可以查看这篇关于应用不显眼的jquery验证的文章ASP.Net MVC 中的动态内容，用于向表单添加动态元素的插件.此插件使用第二种解决方案.

You can also check out this article on Applying unobtrusive jquery validation to dynamic content in ASP.Net MVC for a plugin used for adding dynamic elements to a form. This plugin uses the 2nd solution.

这篇关于不显眼的验证不适用于动态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！