使用 jQuery 验证自定义错误标签放置（针对所有或部分错误）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13200659/
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 Label Placement using jQuery validate (For all or some of your errors)
提问by chainwork
I would like to place one error label (Not All) in a custom location. jQuery provides this http://docs.jquery.com/Plugins/Validation/validate#toptionsoption but I could not find anything about how to place one specific error message and not change the default location of all the rest?
我想在自定义位置放置一个错误标签 ( Not All)。jQuery 提供了这个http://docs.jquery.com/Plugins/Validation/validate#toptions选项，但我找不到任何关于如何放置一个特定错误消息而不更改所有其他错误消息的默认位置的信息？
Be sure to check all the answers below. There are multiple solutions to this. Thanks all!
请务必检查以下所有答案。对此有多种解决方案。谢谢大家！
回答by chainwork
So if you want all your jQuery Validate error messages to appear in one place you would use http://docs.jquery.com/Plugins/Validation/validate#toptions(Find errorPlacement) option on that page.
因此，如果您希望所有 jQuery 验证错误消息都出现在一个地方，您可以在该页面上使用 http://docs.jquery.com/Plugins/Validation/validate#toptions（查找 errorPlacement）选项。
I noticed some answers on here answer one but not both options.
我注意到这里有一些答案，答案之一但不是两个选项。
1) That being said if you want custom placement for all of your errors you can do this:
1）话虽如此，如果您想为所有错误自定义放置，您可以这样做：
$("#myform").validate({
errorPlacement: function(error, element) {
error.appendTo('#errordiv');
}
});
2) If you want to specify specific locations for one or multiple error labels you can do this.
2) 如果您想为一个或多个错误标签指定特定位置，您可以这样做。
errorPlacement: function(error, element) {
if (element.attr("name") == "email" )
error.insertAfter(".some-class");
else if (element.attr("name") == "phone" )
error.insertAfter(".some-other-class");
else
error.insertAfter(element);
}
回答by Abdurrahman I.
Actually its not necessary to use any javascript code for this, and I discovered a simple solution. You can force JQuery Validate to place the validation error in a DOM element.
实际上没有必要为此使用任何 javascript 代码，我发现了一个简单的解决方案。您可以强制 JQuery Validate 将验证错误放在 DOM 元素中。
For example, JQuery generates an error like this:
例如，JQuery 会产生这样的错误：
<label for="firstname" generated="true" class="error">This field required.</label>
You can place this label dom element in your next td block or li element or whatever you want as a blank like this.
您可以将此标签 dom 元素放在下一个 td 块或 li 元素或任何您想要的空白元素中。
<label for="firstname" generated="true" class="error"></label>
JQuery will find that blank field and place the error message for you.
JQuery 将找到该空白字段并为您放置错误消息。
Just don't forget the forfield in label element!
只是不要忘记标签元素中的for字段！
回答by Sparky
This is a more generic solution, not specific to the OP's HTML structure.
这是一个更通用的解决方案，不特定于 OP 的 HTML 结构。
If you only want one particular error label in a different location while the rest remain in their default placement, try this...
如果您只想将一个特定的错误标签放在不同的位置，而其余的则保留在默认位置，请尝试以下操作...
$("#myform").validate({
errorPlacement: function(error, element) {
if (element.attr("name") == "myFieldName") {
// do whatever you need to place label where you want
// an example
error.insertBefore( $("#someOtherPlace") );
// just another example
$("#yetAnotherPlace").html( error );
} else {
// the default error placement for the rest
error.insertAfter(element);
}
}
});
回答by XMaster
I found that if you have more than two labels for custom errors in diferent locations, there can be a crazy position error if you does nor make a single return on each if for errorPlacement, in this sample I have two checkboxes, error label, one checkbox, one label
我发现如果你在不同的位置有两个以上的自定义错误标签，如果你没有或者在每个 if for errorPlacement 上做一个单一的返回，可能会出现一个疯狂的位置错误，在这个示例中我有两个复选框，错误标签，一个复选框，一个标签
HTML Code
HTML代码
<p><label for="owner"><input type="checkbox" name="option[]" id="owner" value="1" validate="required:true, minlength:2" /> I am Owner of my Company</label></p>
<p><label for="agency"><input type="checkbox" name="option[]" id="agency" value="1" /> I am an Agency</label>
<div id="errordiv"></div></p>
<hr>
<p><label for="agree"><input type="checkbox" name="agree" id="agree" value="1" required /> I Agree and I read the Privacy Polities and Use of Terms</label>
<div id="error_agree"></div>
Script
脚本
<script>
$("#register_form").validate({
errorPlacement: function(error, element) {
if(element.attr("name") == "option[]"){
error.appendTo('#errordiv');
return;
}
if(element.attr("name") == "agree"){
error.appendTo('#error_agree');
return;
}else {
error.insertAfter(element);
}
}
});
</script>
