不具有动态内容的工作不引人注目的验证(unobtrusive validation not work

2019-07-20 00:33发布

我在试图让不显眼的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")); 这应该是足以让有关新加载的控件验证...

任何人都可以帮忙吗?

Answer 1:

如果试图解析已被解析它不会更新表单

当您添加动态元素的形式或者是你可以做什么

  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') 

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

您还可以看看这篇文章运用不显眼的jQuery验证在ASP.Net MVC动态内容的用于添加动态元素的形式的插件。 该插件使用第二个解决方案。



Answer 2:

作为除了纳迪姆Khedr的答案....

如果你已经在你的DOM加载的形式动态,然后调用

jQuery.validator.unobtrusive.parse(form); 

(有额外的比特提到的),然后将提交该表格用ajax记得打电话

$(form).valid()

返回true或false(和运行实际验证)您提交表单之前。



Answer 3:

添加到您的_Layout.cshtml

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


Answer 4:

测试:

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


Answer 5:

出人意料的是,当我看到这个问题,官方ASP.NET文档仍然没有对不显眼的任何信息parse()方法或如何与动态内容使用它。 我把创建的自由问题,在文档回购(参考@纳迪姆原来的答案),并提交pull请求进行修复。 此信息现在在可见光客户端验证模型验证话题的部分。



Answer 6:

我被袭击了同样的问题,除了这个没有什么工作:

$(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调用的形式。

希望这会帮助别人。



Answer 7:

只是在模态代码结束时再次复制此代码

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

;)



文章来源: unobtrusive validation not working with dynamic content