带有 Jquery 验证插件的自定义错误消息文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15946924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom Error Message Text with Jquery Validate Plugin
提问by Lokesh Yadav
Need to copy the Custom error message text from a span where text is coming from CMS. It is basically a need to show a custom localized error message.
需要从文本来自 CMS 的跨度复制自定义错误消息文本。基本上是需要显示自定义的本地化错误消息。
Code works when you submit the form but as soon as you click outside, the default message replace the custom one.
当您提交表单时，代码会起作用，但只要您在外部单击，默认消息就会替换自定义消息。
HTML
HTML
<form name="form-core" id="form-core" method="post" action="" role="search" novalidate="novalidate">
<label for="keywords">Hello</label>
<input type="text" id="keyword" name="keyword" class="required" />
<span class="error-message-required">Ce champ est obligattheitroade</span>
<input type="submit" /><input class="cancel" type="submit" value="Reset" />
</form>
JS
JS
$('#form-core').validate({
debug: false,
onfocusout: function (element) { jQuery(element).valid() },
errorElement: "div",
errorPlacement: function (error, element) {
jQuery('div[for=' + error.attr('for') + ']').remove();
error.text($(element).next('.error-message-required').text());
error.insertBefore(element);
}
});
回答by Sparky
It's not working the way you expect because the errorPlacementcallback function is not fired on every error. It's only fired on the first occurrence of the error and then the plugin automatically shows/hides the new error element that itcreated by itself.
它没有按您预期的方式工作，因为errorPlacement回调函数不会在每个错误时触发。它仅在第一次出现错误时触发，然后插件会自动显示/隐藏它自己创建的新错误元素。
1)I think you're making things more complicated than they need to be. Simply specify your custom error message inside the .validate()initialization function. Remove the <span></span>from your HTML/CMS and let the plugin handle this the way it was designed.
1）我认为你让事情变得比他们需要的更复杂。只需在.validate()初始化函数中指定您的自定义错误消息。<span></span>从您的 HTML/CMS 中删除，让插件按照设计的方式处理。
messages: {
keyword: {
required: "Ce champ est obligattheitroade"
}
}
2)Again, let the plugin do its job. Change your errorPlacementcallback function to this:
2）再次，让插件完成它的工作。将您的errorPlacement回调函数更改为：
errorPlacement: function (error, element) {
error.insertBefore(element);
}
3)Change your reset button to type="reset", so that it's not submitting the form:
3)将您的重置按钮更改为type="reset"，这样它就不会提交表单：
<input class="cancel" type="reset" value="Reset" />
Working DEMO: http://jsfiddle.net/wQaYw/
工作演示：http: //jsfiddle.net/wQaYw/
jQuery:
jQuery：
$(document).ready(function () {
$('#form-core').validate({
messages: {
keyword: {
required: "Ce champ est obligattheitroade"
}
},
onfocusout: function (element) {
jQuery(element).valid()
},
errorElement: "div",
errorPlacement: function (error, element) {
error.insertBefore(element);
}
});
});
EDIT:
编辑：
If, for whatever reason, you cannot remove the spanfrom your CMS and declare the custom messages inside of .validate(), you have another option.
如果出于某种原因，您无法span从 CMS 中删除并在 中声明自定义消息.validate()，那么您还有另一种选择。
Use the built-in rules('add')methodto dynamically alter the default messages for every input[type="text"], with a requiredrule, on the entire form as follows. (However, with this method, you mustsupply a custom message for each of these elements as this will over-ride all of them.)
使用内置的rules('add')方法来动态改变每一个默认的消息input[type="text"]，有required规则，整个表格如下。（但是，使用此方法，您必须为这些元素中的每一个提供自定义消息，因为这将覆盖所有这些元素。）
$('#form-core input[type="text"]').each(function () {
$(this).rules('add', {
messages: {
required: $(this).next('.error-message-required').text()
}
});
});
after this...
在这之后...
$('#form-core').validate({
onfocusout: function (element) {
jQuery(element).valid()
},
errorElement: "div",
errorPlacement: function (error, element) {
error.insertBefore(element);
}
});
Working DEMO: http://jsfiddle.net/6Vzdz/
工作演示：http: //jsfiddle.net/6Vzdz/
