我有一个现有的表单，其中的字段非常接近。我想在一个小弹出窗口中而不是字段旁边的常规标签中获取错误消息。
更准确地说，这是我想要的错误消息样式。
关于如何找到应用于错误消息的样式以及如何更改它们的任何线索？
提前致谢。
【问题讨论】：
标签： jquery css jquery-validate
What you want to achieve 比简单地更改错误class 或消息样式稍微复杂一些。
您必须将精力集中在errorPlacement 和success 回调函数上。见文档：jqueryvalidation.org/validate
或者，您可以安装另一个插件来为您创建这些工具提示。我使用 Tooltipster，但如何集成 tooltip 插件取决于其开发人员提供的方法。
首先，在 all 将显示错误的特定 form 元素上初始化 Tooltipster 插件 (with any options)：
$(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
});
});
其次，使用Tooltipster's advanced options和success: and errorPlacement: callback functions built into the Validate plugin自动显示和隐藏工具提示如下：
$(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');
}
});
});
工作演示：http://jsfiddle.net/kyK4G/
来源：How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?
【讨论】：
它主要归结为 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;
}
然后你可以绝对定位你的错误标签并应用你喜欢的任何其他样式。
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;
}
这是一个例子： http://jsfiddle.net/wrxsti85/yD3c3/
希望对你有帮助！！！
编辑：这些字段仅设置为数字，因此要触发错误只需将文本放入字段中。
【讨论】：
大概可以从这个答案开始jQuery form validation - CSS of error label
jquery 验证参考文档说
错误消息通过带有附加类（选项errorClass）的标签元素处理。
这意味着如果您按照上一个答案中的信息进行操作，您可以将错误添加到带有 errorClass 类的 div 中。
然后只需使用 css 适当地设置它们的样式。
顺便说一句，您应该熟悉 chrome 和/或 firefox 的浏览器开发工具。这些可以帮助您找到页面上元素的对象和样式以及帮助您调试 javascript。
【讨论】：