101

我在尝试让不显眼的 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 中填写任何信息，提交事件也会显示警报（“有效”）。

但是，如果我不是动态加载视图，而是@Html.Partial("test", Model)在主视图中呈现部分视图（并且我不执行 AJAX 调用），那么验证就可以正常工作。

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

任何人都可以帮忙吗？

4

7 回答 7

239

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

当您向表单添加动态元素时，您可以执行的操作是

  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使用 jquerydata方法访问表单的数据：

    $(form).data('unobtrusiveValidation')

    然后访问规则集合并添加新元素属性（这有点复杂）。

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

于 2013-02-20T14:38:32.907 回答
20

作为 Nadeem Khedr 回答的补充......

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

jQuery.validator.unobtrusive.parse(form);

（提到了额外的位），然后将使用 ajax 提交该表单记得调用

$(form).valid()

在您提交表单之前返回 true 或 false（并运行实际验证）。

于 2013-06-06T14:55:04.853 回答
7

令人惊讶的是，当我查看这个问题时，ASP.NET 官方文档仍然没有任何关于不显眼的parse()方法或如何将其与动态内容一起使用的信息。我冒昧地在文档存储库中创建了一个问题（参考@Nadeem 的原始答案）并提交了一个拉取请求来修复它。此信息现在在模型验证主题的客户端验证部分中可见。

于 2017-11-15T19:52:37.130 回答
6

将此添加到您的 _Layout.cshtml

 $(function () {
        //parsing the unobtrusive attributes when we get content via ajax
        $(document).ajaxComplete(function () {
            $.validator.unobtrusive.parse(document);
        });
    });
于 2015-01-18T10:52:44.603 回答
3

测试这个：

if ($.validator.unobtrusive != undefined) {
    $.validator.unobtrusive.parse("form");
}
于 2013-12-06T20:41:34.493 回答
3

我遇到了同样的问题，除此之外没有任何效果：

$(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 调用保存表单。

希望这会对某人有所帮助。

于 2018-04-17T14:43:14.447 回答
0

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

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

;)

于 2018-09-09T05:12:04.523 回答