在jquery.validate.unobtrusive
中重写ErrorPlacement
函数的正确方法是什么?
查看jquery.validate.unobtrusive.js脚本,开发人员的意图似乎是允许您通过设置$jQval.unobtrusive.options
来应用自己的ErrorPlacement
函数。
在定义errorPlacement
函数的validationInfo(form)
函数中,我们看到对execInContext("errorPlacement", arguments)
的调用。
看起来如果我们在$.validator.unobtrusive.options
下创建一个errorPlacement
函数,那么this将被调用。
$.validator.unobtrusive.options = {
errorPlacement: function () {
console.log("hello");
}
};
问题是必须在jquery.validate.js之后和引用jquery.validate.unobtrusive.js之前配置。否则,$jQval.unobtrusive.options
是null
,$form.data(data_validation, result)
将不会再次设置。
function validationInfo(form) {
var $form = $(form),
result = $form.data(data_validation),
onResetProxy = $.proxy(onReset, form),
defaultOptions = $jQval.unobtrusive.options || {},
execInContext = function (name, args) {
var func = defaultOptions[name];
func && $.isFunction(func) && func.apply(form, args);
}
if (!result) {
result = {
options: { // options structure passed to jQuery Validate's validate() method
errorClass: defaultOptions.errorClass || "input-validation-error",
errorElement: defaultOptions.errorElement || "span",
errorPlacement: function () {
onError.apply(form, arguments);
execInContext("errorPlacement", arguments);
},
invalidHandler: function () {
onErrors.apply(form, arguments);
execInContext("invalidHandler", arguments);
},
messages: {},
rules: {},
success: function () {
onSuccess.apply(form, arguments);
execInContext("success", arguments);
}
},
attachValidation: function () {
$form
.off("reset." + data_validation, onResetProxy)
.on("reset." + data_validation, onResetProxy)
.validate(this.options);
},
validate: function () { // a validation function that is called by unobtrusive Ajax
$form.validate();
return $form.valid();
}
};
$form.data(data_validation, result);
}
return result;
}
另一种处理方法是:
1.设置$.validator.unobtrusive.options
errorPlacement
功能
1.删除不显眼的验证
1.重新应用不显眼的验证
$.validator.unobtrusive.options = {
errorPlacement: function () {
console.log("errorPlacement");
}
};
$("#form_selector").removeData("unobtrusiveValidation");
// reapply the form's validator
$.validator.unobtrusive.parse(document);
或者另一种选择是覆盖函数调用。
var validator = $("#form_selector").data('validator');
var originalFunction = validator.settings.errorPlacement;
validator.settings.errorPlacement = function(error,element) {
console.log("errorPlacement");
originalFunction(error, element);
};
哪种方法是实现自己的errorPlacement
方法的正确方法?
3条答案
按热度按时间mlmc2os51#
3年后才回答,但事实证明我今天正是需要这个。在这个时间段内,不显眼的代码可能已经被修复了,但是你的示例代码对我来说工作得很好。我将此添加到我的一个站点脚本中,该脚本在jquery.validate.js和jquery.validate.unobtrusive.js之后加载:
它工作得很好,但有一个额外的捕获:这一行必须在文件准备好之前运行。
validationInfo
方法在document ready上通过以下方式调用,从jquery.validate.unobtrusive.js
的底部:parse
最终调用validationInfo
。不显眼的代码的问题是当validationInfo
设置defaultOptions = $jQval.unobtrusive.options || {}
时。很明显,如果你还没有定义unobtrusive.options,它会愚蠢地将defaultOptions
设置为一个空白对象,并且不再检查它,不管你对$jQval.unobtrusive.options做了什么。如果他们只是删除了|| {}
,一切都会很好,因为它只是一个对象引用。唉...如果在加载文档之前无法设置errorPlacement回调函数,或者需要动态更改它,只需在
jquery.validate.js
和jquery.validate.unobtrusive.js
之后加载的脚本中添加以下一行:这将导致
defaultOptions
指向一个可以引用的对象。然后,在任何需要的地方,按预期修改$.validator.unobtrusive.options
。只是要小心不要覆盖对象,因为如果你这样做,你不会影响defaultOptions
指向的对象。也就是说,这样做:92dk7w1h2#
使用Object.assign
经过一些实验,我能够让它与下面的代码(加载后的一切)工作。我使用的是基于 Bootstrap 的主题,所以它希望表单组容器上有错误
eqqqjvef3#
我在这个问题上挣扎了好几天,我几乎尝试了所有可能的选择。它在少数情况下有效,但并不可靠。要满足的条件太多了。
对我有效的是将“jquery.validate.unobtrusive.min.js”与我的脚本捆绑在一起。这一招每次都奏效,无一例外。捆绑的顺序可能很重要,把你的脚本放在第二位。
script.js:
bundleconfig.json(用于.NET环境。根据需要修改)