不显眼的验证不工作与动态内容

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

任何人都可以帮忙吗？

来源

2013-02-15 Sam

请注意，'unobtrusive.parse'函数将选择器作为参数，而不是元素。 – Fred 2016-04-12 13:17:03

我也有同样的问题，但在mvc 2.我一步一步地通过：http://weblogs.asp.net/imranbaloch/archive/2010/07/11/asp-net-mvc-client- side-validation-with-dynamic-contents.aspx这也可能对你有所帮助。 http://weblogs.asp.net/imranbaloch/archive/2011/03/05/unobtrusive-client-side-validation-with-dynamic-contents-in-asp-net-mvc.aspx希望这个帮助:) – 2013-06-03 09:38:05

178

如果试图解析已被解析的形式，它不会更新

当你添加动态元素的形式，你可以做的是要么

你可以清除表格的验证和重新验证它是这样的：

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数据：
```
$(form).data('unobtrusiveValidation') 
```
然后访问规则集合并添加新的元素属性（这有点复杂）。

您还可以查看Applying unobtrusive jquery validation to dynamic content in ASP.Net MVC这篇文章，了解用于向表单添加动态元素的插件。这个插件使用第二种解决方案。

来源

2013-02-20 14:38:32

+11

Dude你摇滚，完全救了我的一天！真棒回答！ – 2014-02-15 08:51:45

总救生员！非常感谢。 – 2014-11-07 14:09:38

我担心我应该自己邀请。来自该页面的脚本就像一个魅力。 – cezarypiatek 2014-11-28 11:11:21

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

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

jQuery.validator.unobtrusive.parse(form);

（与所提到的额外位），然后将提交该表格用ajax记得打电话

$(form).valid()

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

来源

2013-06-06 14:55:04

嗨，即时通讯面临同样的问题。即时通讯在弹出窗口中显示我的动态视图（jQuery对话框）。毫不夸张的验证不起作用。我在哪里可以在我的动态视图中调用$（form）.valid（）或者在其他地方调用？ – mmssaann 2013-07-18 07:54:33

测试：

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

来源

2013-12-06 20:41:34

添加到您的_Layout.cshtml

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

来源

2015-01-18 10:52:44

这特别低效。 – Liam 2015-05-27 10:09:44

出人意料的是，当我看到这个问题，官方ASP.NET文档仍然没有对任何信息不显眼的parse()方法或如何与动态内容一起使用。我冒昧地在docs repo上创建了一个issue（引用@ Nadeem的原始答案）并提交了一个pull请求来修复它。此信息现在在模型验证主题的client side validation部分中可见。

来源

2017-11-15 19:52:37 Rabadash8820

不显眼的验证不工作与动态内容

回答

相关问题