jquery 验证插件。更改错误样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20618991/
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
jquery validate plugin. Change the error styles
提问by DJR
I have an existing form which has fields pretty close together. I want to get the error messages in a little popup instead of the regular lable beside the field.
我有一个现有的表单，其中的字段非常接近。我想在一个小弹出窗口中获取错误消息，而不是字段旁边的常规标签。
To be more precise, this is the style i want for my error message.
更准确地说，这是我想要的错误消息样式。
Any clues on how to find the styles applied to the error message and how to change them?
关于如何找到应用于错误消息的样式以及如何更改它们的任何线索？
Thanks in advance.
提前致谢。
回答by Sparky
What you want to achieveis slightly more complex than simply changing the error classor message styles.
您想要实现的目标比简单地更改错误class或消息样式稍微复杂一些。
You must focus your efforts on the errorPlacementand successcallback functions. See documentation: jqueryvalidation.org/validate
您必须将精力集中在errorPlacement和success回调函数上。请参阅文档： jqueryvalidation.org/validate
Optionally, you can install another plugin that will create these tooltips for you. I use Tooltipster, but how you integrate the tooltip plugin depends on what methods are made available by its developer.
或者，您可以安装另一个插件来为您创建这些工具提示。我使用 Tooltipster，但如何集成工具提示插件取决于其开发人员提供的方法。
First, initialize the Tooltipster plugin (with any options) on allspecific formelements that will display errors:
首先，在将显示错误的所有特定元素上初始化 Tooltipster 插件（带有任何选项）：form
$(document).ready(function () {
// initialize tooltipster on form input elements
$('#myform input[type="text"]').tooltipster({
trigger: 'custom', // default is 'hover' which is no good here
onlyOne: false, // allow multiple tips to be open at a time
position: 'right' // display the tips to the right of the element
});
});
Second, use Tooltipster's advanced optionsalong with the success:and errorPlacement:callback functions built into the Validate pluginto automatically show and hide the tooltips as follows:
其次，使用Tooltipster 的高级选项以及内置于 Validate 插件中的success:和errorPlacement:回调函数来自动显示和隐藏工具提示，如下所示：
$(document).ready(function () {
// initialize validate plugin on the form
$('#myform').validate({
// any other options & rules,
errorPlacement: function (error, element) {
$(element).tooltipster('update', $(error).text());
$(element).tooltipster('show');
},
success: function (label, element) {
$(element).tooltipster('hide');
}
});
});
Working Demo: http://jsfiddle.net/kyK4G/
工作演示：http: //jsfiddle.net/kyK4G/
Source: How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?
回答by wrxsti
It mostly comes down to CSS. Wrap each field into a container that is relatively positioned like so:
它主要归结为 CSS。将每个字段包装到一个相对定位的容器中，如下所示：
<div class="fieldContainer">
<label for="phone">Phone Number:</label>
<input type="text" name="phone" />
</div>
<div class="fieldContainer">
<label for="phone2">Phone Number:</label>
<input type="text" name="phone2" />
</div>
.fieldContainer {
position: relative;
margin-bottom: 20px;
}
Then you can absolutely position your error label and apply whatever other styles you like.
然后你可以绝对定位你的错误标签并应用你喜欢的任何其他样式。
label.error {
position: absolute;
right: 143px;
top: -25px;
border: solid 1px #000;
background: #fff;
box-shadow: 0px 2px 6px rgba(0, 0, 0, .7);
padding: 2px 5px;
}
Here is an example: http://jsfiddle.net/wrxsti85/yD3c3/
这是一个例子：http: //jsfiddle.net/wrxsti85/yD3c3/
Hope this helps!!!
希望这可以帮助！！！
Edit: Those fields are set to digits only, so to trigger the error just put text into the fields.
编辑：这些字段仅设置为数字，因此要触发错误，只需将文本放入字段中。
回答by crad
Can probably start with this answer jQuery form validation - CSS of error label
可能可以从这个答案开始jQuery 表单验证 - 错误标签的 CSS
The jquery validation reference docs say
jquery 验证参考文档说
Error messages are handled via label elements with an additional class (option errorClass).
错误消息通过带有附加类（选项 errorClass）的标签元素进行处理。
This means if you follow the info in the previous answer you can have the error added in a div with class errorClass.
这意味着如果您遵循上一个答案中的信息，您可以将错误添加到类 errorClass 的 div 中。
Then just style those appropriately using css.
然后只需使用 css 适当地设置样式。
As an asside, you should become familiar with the browser development tools for chrome and/or firefox. These can help you find the objects and styles for elements on the page as well as help you debug your javascript.
顺便说一句，您应该熟悉 chrome 和/或 firefox 的浏览器开发工具。这些可以帮助您找到页面上元素的对象和样式，并帮助您调试 javascript。
