我正在使用 jquery 验证插件,并希望使用 errorPlacement 函数将错误消息添加到字段标题属性,并在字段旁边仅显示一个 ✘。
当使用提交按钮提交表单但触发以下任何事件时,这非常有效: - onfocusout - 点击 - onkeyup
验证检查已运行,但它会跳过 errorPlacement 函数并在字段后添加完整的错误消息,就像默认行为一样。
我正在使用以下代码:
$("#send-mail").validate({
debug: true,
// set this class to error-labels to indicate valid fields
success: function(label) {
// set text as tick
label.html("✔").addClass("valid");
},
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) {
console.log("errorPlacement called for "+element.attr("name")+" field");
// check for blank/success error
if(error.text() == "")
{
// remove field title/error message from element
element.attr("title", "");
console.log("error check passed");
}
else
{
// get error message
var message = error.text();
// set as element title
element.attr("title", message);
// clear error html and add cross glyph
error.html("✘");
console.log("error check failed: "+message);
}
// add error label after form element
error.insertAfter(element);
},
ignoreTitle: true,
errorClass: "invalid"
});
最佳答案
您的问题是插件只为每个验证的元素调用一次 errorPlacement
函数。即首次创建元素的错误标签时。之后插件只是重用已经存在的标签并替换里面的 html(或者如果元素现在有效则隐藏错误标签)。这就是为什么您的十字架被移除并显示实际错误消息的原因。
只是为了确保插件的流程清晰。
- 元素(还没有错误标签)
- 元素在某个时候得到验证
- 插件创建错误标签并调用
errorPlacement
函数 - 元素“cross”(标题中的错误信息)
- 元素获得焦点,你改变了一些东西
- 插件重新验证元素
- 看到错误标签已经创建(并放置)
- 插件只是调用
label.html(message)
而不是删除旧标签并读取它
所以您看到您的问题是插件所做的一种优化,以保存一些不必要的错误标签插入/删除。这也有道理。
你可以通过查看验证插件源代码来检查我说的内容
jquery.validate.js v1.6 checkin 函数 showLabel
第 617-625 行的相关部分。
一个可能的解决方案是额外提供一个自定义的 showErrors
回调,用暴力解决问题。
类似的东西
$("#send-mail").validate({
...
showErrors: function(errorMap, errorList) {
for (var i = 0; errorList[i]; i++) {
var element = this.errorList[i].element;
//solves the problem with brute force
//remove existing error label and thus force plugin to recreate it
//recreation == call to errorplacement function
this.errorsFor(element).remove();
}
this.defaultShowErrors();
}
...
});
也许对此有更简洁的解决方案,但这应该可以做到,并让您有时间研究更好的解决方案。
关于javascript - jQuery Validation Plugin : Invoke errorPlacement function when onfocusout, 键入并单击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2400607/