我在 ASP.NET MVC 中使用 jQuery 的不显眼的验证插件。在服务器上呈现的任何字段都经过正确验证。
但是,如果我使用 JavaScript 在表单中动态添加一个字段,即使它具有适当的 HTML5data-*
属性,也不会对其进行验证。
任何人都可以指导我如何实现这一目标吗?
我在 ASP.NET MVC 中使用 jQuery 的不显眼的验证插件。在服务器上呈现的任何字段都经过正确验证。
但是,如果我使用 JavaScript 在表单中动态添加一个字段,即使它具有适当的 HTML5data-*
属性,也不会对其进行验证。
任何人都可以指导我如何实现这一目标吗?
更简单的答案:
我正在使用 MVC 4 和 JQuery 1.8。我已经把它变成了一个模块化函数,它接受新添加的元素的 jQuery 对象:
function fnValidateDynamicContent($element) {
var $currForm = $element.closest("form");
$currForm.removeData("validator");
$currForm.removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse($currForm);
$currForm.validate(); // This line is important and added for client side validation to trigger, without this it didn't fire client side errors.
}
例如,如果您添加了一个带有 id 的新表tblContacts
,那么您可以像这样调用:
fnValidateDynamicContent($("#tblContacts"))
这是一篇您可能会发现有用的博客文章,它应该让您走上正轨。从那里采取的扩展方法:
/// <reference path="jquery-1.4.4.js" />
/// <reference path="jquery.validate.js" />
/// <reference path="jquery.validate.unobtrusive.js" />
(function ($) {
$.validator.unobtrusive.parseDynamicContent = function (selector) {
//use the normal unobstrusive.parse method
$.validator.unobtrusive.parse(selector);
//get the relevant form
var form = $(selector).first().closest('form');
//get the collections of unobstrusive validators, and jquery validators
//and compare the two
var unobtrusiveValidation = form.data('unobtrusiveValidation');
var validator = form.validate();
$.each(unobtrusiveValidation.options.rules, function (elname, elrules) {
if (validator.settings.rules[elname] == undefined) {
var args = {};
$.extend(args, elrules);
args.messages = unobtrusiveValidation.options.messages[elname];
$('[name="' + elname + '"]').rules("add", args);
} else {
$.each(elrules, function (rulename, data) {
if (validator.settings.rules[elname][rulename] == undefined) {
var args = {};
args[rulename] = data;
args.messages = unobtrusiveValidation.options.messages[elname][rulename];
$('[name="' + elname + '"]').rules("add", args);
}
});
}
});
}
})($);
接着:
var html = "<input data-val='true' "+
"data-val-required='This field is required' " +
"name='inputFieldName' id='inputFieldId' type='text'/>;
$("form").append(html);
$.validator.unobtrusive.parseDynamicContent('form input:last');
更新以添加博客文章评论中引用的修复,否则会发生 js 错误。
为了让达林的回答起作用,我更改了以下行:
$.validator.unobtrusive.parse(selector);
对此:
$(selector).find('*[data-val = true]').each(function(){
$.validator.unobtrusive.parseElement(this,false);
});
这是完整的示例:
(function ($) {
$.validator.unobtrusive.parseDynamicContent = function (selector) {
// don't use the normal unobstrusive.parse method
// $.validator.unobtrusive.parse(selector);
// use this instead:
$(selector).find('*[data-val = true]').each(function(){
$.validator.unobtrusive.parseElement(this,false);
});
//get the relevant form
var form = $(selector).first().closest('form');
//get the collections of unobstrusive validators, and jquery validators
//and compare the two
var unobtrusiveValidation = form.data('unobtrusiveValidation');
var validator = form.validate();
$.each(unobtrusiveValidation.options.rules, function (elname, elrules) {
if (validator.settings.rules[elname] == undefined) {
var args = {};
$.extend(args, elrules);
args.messages = unobtrusiveValidation.options.messages[elname];
$('[name="' + elname + '"]').rules("add", args);
} else {
$.each(elrules, function (rulename, data) {
if (validator.settings.rules[elname][rulename] == undefined) {
var args = {};
args[rulename] = data;
args.messages = unobtrusiveValidation.options.messages[elname][rulename];
$('[name="' + elname + '"]').rules("add", args);
}
});
}
});
}
})($);
$.validator.unobtrusive.parse
内部调用 parseElement 方法,但每次将isSkip
参数发送到 true 所以使用这个值
if (!skipAttach) {
valInfo.attachValidation();
}
jquery.unobtrusive.js 中的这段代码没有将验证附加到元素,我们只找到最初出现在页面上的输入的验证数据。
注意Darin 上面的回答是正确的,你可以在他提到的博客上找到很多人已经使用 xhalent 的代码(由 darin 发布)解决了问题。为什么它不起作用超出了我的理解。此外,你可以找到很多帖子告诉你,只是打电话
$.validator.unobtrusive.parse(selector)
足以验证动态加载的内容