如何使用 jquery.validation 插件不将错误元素显示为标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2375584/
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
How to not display error element as label with jquery.validation plugin
提问by TikaL13
Okay guys,
好吧，伙计们，
I have read through all the other posts and question on jQuery Validation plugin and they don't seem to have what I'm looking to do.
我已经阅读了有关 jQuery 验证插件的所有其他帖子和问题，但它们似乎没有我想要做的。
I would like to have the display error not show with message but just create a red border around the input field instead.
我想让显示错误不显示在消息中，而只是在输入字段周围创建一个红色边框。
Here is just some of the form:
这里只是一些表格：
<form id="donate_form" name="checkoutForm" method="post">
<label class="desc" id="title0" for="billing_name_first">
Name
<span id="req_1" class="req">*</span>
</label>
<div>
<span class="left">
<input name="billing.name.first" id="billing_name_first" type="text" class="field text required" value="" tabindex="1" />
<label for="billing_name_first">First</label>
</span>
<span class="right">
<input name="billing.name.last" id="billing_name_last" type="text" class="field text required" value="" tabindex="2" />
<label for="billing_name_last">Last</label>
</span>
</div>
I am assuming that I need to place the class required on the input??
我假设我需要将所需的类放在输入上？？
Then with CSS hide the label.errorwhich is spit out by the plugin? I've tried that but no go.
然后用CSS隐藏label.error插件吐出的内容？我试过了，但不行。
Am I looking in the right place?
我找对地方了吗？
Thanks!
谢谢！
回答by cdmckay
All these solutions seem to be more complicated than they need to be. Here's a simple solution. .erroris added to invalid fields by default. So, first thing we need to do is style it so it changes the border and background to different shades of red:
所有这些解决方案似乎都比它们需要的更复杂。这是一个简单的解决方案。.error默认添加到无效字段。因此，我们需要做的第一件事是设置样式，以便将边框和背景更改为不同深浅的红色：
.error {
border-color: #cd0a0a !important;
background: #fef1ec !important;
}
Then, in your JavaScript:
然后，在您的 JavaScript 中：
$(function() {
$("#donate_form").validate({
errorPlacement: $.noop
});
});
The errorPlacementoption is how the validate plugin lets you override how the error message is placed. In this case, we simply make it do nothing, and thus no error message is created.
该errorPlacement选项是验证插件如何让您覆盖错误消息的放置方式。在这种情况下，我们只是让它什么都不做，因此不会创建错误消息。
回答by Ugo S. M.
I understand what you are trying to achieve; I had the same requirements but had serious difficulties trying to achieve it, but I did. Here's how:
我理解你想要达到的目标；我有同样的要求，但在尝试实现它时遇到了严重的困难，但我做到了。就是这样：
I created two CSS style classes "errorHighlight" and "textinput", like so:
.errorHighlight { border: 2px solid #CC0000; }.textinput {border: 1px silver solid;}At design time, I applied the "textinput" class to my text input fields:
<input type="text" class="textinput" />And then in my jQuery form validation plugin settings inside my Javascript file, I added the following general validation settings for all forms on this page:
$.validator.setDefaults({ errorPlacement: function(error, element) { $(element).attr({"title": error.text()}); }, highlight: function(element){ //$(element).css({"border": "2px solid #CC0000"}); $(element).removeClass("textinput"); $(element).addClass("errorHighlight"); }, unhighlight: function(element){ //$(element).css({"border": "2px solid #CC0000"}); $(element).removeClass("errorHighlight"); $(element).addClass("textinput"); } });
我创建了两个 CSS 样式类“errorHighlight”和“textinput”，如下所示：
.errorHighlight { border: 2px solid #CC0000; }.textinput {border: 1px silver solid;}在设计时，我将“textinput”类应用于我的文本输入字段：
<input type="text" class="textinput" />然后在我的 Javascript 文件中的 jQuery 表单验证插件设置中，我为此页面上的所有表单添加了以下常规验证设置：
$.validator.setDefaults({ errorPlacement: function(error, element) { $(element).attr({"title": error.text()}); }, highlight: function(element){ //$(element).css({"border": "2px solid #CC0000"}); $(element).removeClass("textinput"); $(element).addClass("errorHighlight"); }, unhighlight: function(element){ //$(element).css({"border": "2px solid #CC0000"}); $(element).removeClass("errorHighlight"); $(element).addClass("textinput"); } });
Now, whenever a field fails validation, the "highlight" callback function is called on the element. The "errorPlacement" callback function prevents the default action of inserting a label after the erring input field, instead it appends the error message to the "title" attribute of the field (which can be used as the source of text for a tooltip display).
现在，只要字段验证失败，就会highlight在元素上调用“ ”回调函数。“ errorPlacement”回调函数阻止在错误输入字段后插入标签的默认操作，而是将错误消息附加到title字段的“ ”属性（可用作工具提示显示的文本源）。
Hope this helps.
希望这可以帮助。
回答by P?l
You can extract just the error message in errorPlacement: and append it to whatever you like, like this:
您可以仅提取 errorPlacement: 中的错误消息，并将其附加到您喜欢的任何内容中，如下所示：
errorPlacement: function(error, element) {
$('#error-div').html(error[0].innerHTML)//<-error[0].innerHTML is the error msg.
}
回答by Adrian Enriquez
Try:
尝试：
$(function() {
$("#donate_form").validate({
errorPlacement: $.noop
});
});
回答by jasonbar
I don't know if this is the correct way to do it, but we use:
我不知道这是否是正确的方法，但我们使用：
jQuery.validator.messages.required = '';
That suppresses the error messages and leaves the input border.
这会抑制错误消息并离开输入边界。
Actually, the jQuery Plugindocumentation points to an example that does this, so I guess it's the accepted method..
实际上，jQuery 插件文档指向了一个执行此操作的示例，所以我想这是公认的方法。
Customized message display: No messages displayed for the required method, only for type-errors (like wrong email format); A summary is displayed at the top ("You missed 12 fields. They have been highlighted below.")
自定义消息显示：不显示所需方法的消息，仅显示类型错误（如错误的电子邮件格式）；摘要显示在顶部（“您错过了 12 个字段。它们已在下面突出显示。”）
