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.
提前致谢。
3 个解决方案
#1
14
What you want to achieve is slightly more complex than simply changing the error class or message styles.
您想要实现的内容比仅更改错误类或消息样式稍微复杂一些。
You must focus your efforts on the errorPlacement and success callback functions. See documentation: jqueryvalidation.org/validate
您必须将精力集中在errorPlacement和成功回调函数上。请参阅文档：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 all specific form elements that will display errors:
首先，在将显示错误的所有特定表单元素上初始化Tooltipster插件（带有任何选项）：
$(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 options along with the success: and errorPlacement: callback functions built into the Validate plugin to automatically show and hide the tooltips as follows:
其次，使用Tooltipster的高级选项以及成功：和errorPlacement：Validate插件中内置的回调函数，自动显示和隐藏工具提示，如下所示：
$(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?
来源：如何在Tooltipster工具提示中显示来自jQuery Validate插件的消息？
#2
2
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.
编辑：这些字段仅设置为数字，因此要触发错误，只需将文本放入字段即可。
#3
-1
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.
这意味着如果您按照上一个答案中的信息进行操作，则可以在带有class 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。
#1
14
What you want to achieve is slightly more complex than simply changing the error class or message styles.
您想要实现的内容比仅更改错误类或消息样式稍微复杂一些。
You must focus your efforts on the errorPlacement and success callback functions. See documentation: jqueryvalidation.org/validate
您必须将精力集中在errorPlacement和成功回调函数上。请参阅文档：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 all specific form elements that will display errors:
首先，在将显示错误的所有特定表单元素上初始化Tooltipster插件（带有任何选项）：
$(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 options along with the success: and errorPlacement: callback functions built into the Validate plugin to automatically show and hide the tooltips as follows:
其次，使用Tooltipster的高级选项以及成功：和errorPlacement：Validate插件中内置的回调函数，自动显示和隐藏工具提示，如下所示：
$(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?
来源：如何在Tooltipster工具提示中显示来自jQuery Validate插件的消息？
#2
2
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.
编辑：这些字段仅设置为数字，因此要触发错误，只需将文本放入字段即可。
#3
-1
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.
这意味着如果您按照上一个答案中的信息进行操作，则可以在带有class 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。