jQuery 覆盖默认验证错误消息显示 (Css) 弹出窗口/工具提示，如
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/860055/
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 override default validation error message display (Css) Popup/Tooltip like
提问by Phill Pafford
I'm trying to over ride the default error message label with a div instead of a label. I have looked at this postas well and get how to do it but my limitations with CSS are haunting me. How can I display this like some of these examples:
我正在尝试使用 div 而不是标签来覆盖默认错误消息标签。我也看过这篇文章并了解如何去做，但我对 CSS 的限制一直困扰着我。我怎样才能像这些例子中的一些一样显示它：
Example #1 (Dojo)- Must type invalid input to see error display
Example #2
Example #1 (Dojo)- 必须输入无效输入才能看到错误显示
Example #2
Here is some example code that overrides the error label to a div element
这是一些将错误标签覆盖到 div 元素的示例代码
$(document).ready(function(){
$("#myForm").validate({
rules: {
"elem.1": {
required: true,
digits: true
},
"elem.2": {
required: true
}
},
errorElement: "div"
});
});
Now I'm at a loss on the css part but here it is:
现在我对 css 部分不知所措，但这里是：
div.error {
position:absolute;
margin-top:-21px;
margin-left:150px;
border:2px solid #C0C097;
background-color:#fff;
color:white;
padding:3px;
text-align:left;
z-index:1;
color:#333333;
font:100% arial,helvetica,clean,sans-serif;
font-size:15px;
font-weight:bold;
}
UPDATE:
更新：
Okay I'm using this code now but the image and the placement on the popup is larger than the border, can this be adjusted to be dynamic is height?
好的，我现在正在使用此代码，但是弹出窗口中的图像和位置大于边框，可以将其调整为动态高度吗？
if (element.attr('type') == 'radio' || element.attr('type') == 'checkbox') {
element = element.parent();
offset = element.offset();
error.insertBefore(element)
error.addClass('message'); // add a class to the wrapper
error.css('position', 'absolute');
error.css('left', offset.left + element.outerWidth());
error.css('top', offset.top - (element.height() / 2)); // Not working for Radio, displays towards the bottom of the element. also need to test with checkbox
} else {
// Error placement for single elements
offset = element.offset();
error.insertBefore(element)
error.addClass('message'); // add a class to the wrapper
error.css('position', 'absolute');
error.css('left', offset.left + element.outerWidth());
error.css('top', offset.top - (element.height() / 2));
}
the css is the same as below (your css code)
css 和下面一样（你的 css 代码）
Html
html
<span>
<input type="radio" class="checkbox" value="P" id="radio_P" name="radio_group_name"/>
<label for="radio_P">P</label>
<input type="radio" class="checkbox" value="S" id="radio_S" name="radio_group_name"/>
<label for="radio_S">S</label>
</span>
回答by Nadia Alramli
You can use the errorPlacementoption to override the error message display with little css. Because css on its own will not be enough to produce the effect you need.
您可以使用errorPlacement选项用很少的 css 覆盖错误消息显示。因为 css 本身不足以产生您需要的效果。
$(document).ready(function(){
$("#myForm").validate({
rules: {
"elem.1": {
required: true,
digits: true
},
"elem.2": {
required: true
}
},
errorElement: "div",
wrapper: "div", // a wrapper around the error message
errorPlacement: function(error, element) {
offset = element.offset();
error.insertBefore(element)
error.addClass('message'); // add a class to the wrapper
error.css('position', 'absolute');
error.css('left', offset.left + element.outerWidth());
error.css('top', offset.top);
}
});
});
You can play with the left and top css attributes to show the error message on top, left, right or bottom of the element. For example to show the error on the top:
您可以使用 left 和 top css 属性来在元素的顶部、左侧、右侧或底部显示错误消息。例如在顶部显示错误：
errorPlacement: function(error, element) {
element.before(error);
offset = element.offset();
error.css('left', offset.left);
error.css('top', offset.top - element.outerHeight());
}
And so on. You can refer to jQuery documentation about cssfor more options.
等等。您可以参考关于 css 的 jQuery 文档以获取更多选项。
Here is the css I used. The result looks exactly like the one you want. With as little CSS as possible:
这是我使用的css。结果看起来与您想要的完全一样。使用尽可能少的 CSS：
div.message{
background: transparent url(msg_arrow.gif) no-repeat scroll left center;
padding-left: 7px;
}
div.error{
background-color:#F3E6E6;
border-color: #924949;
border-style: solid solid solid none;
border-width: 2px;
padding: 5px;
}
And here is the background image you need:
这是您需要的背景图片：
(source: scriptiny.com)
（来源：scriptiny.com）
If you want the error message to be displayed after a group of options or fields. Then group all those elements inside one container a 'div' or a 'fieldset'. Add a special class to all of them 'group' for example. And add the following to the begining of the errorPlacement function:
如果您希望在一组选项或字段之后显示错误消息。然后将所有这些元素组合在一个容器中，即“div”或“fieldset”。例如，为所有这些“组”添加一个特殊的类。并将以下内容添加到 errorPlacement 函数的开头：
errorPlacement: function(error, element) {
if (element.hasClass('group')){
element = element.parent();
}
...// continue as previously explained
If you only want to handle specific cases you can use attr instead:
如果您只想处理特定情况，可以改用 attr：
if (element.attr('type') == 'radio'){
element = element.parent();
}
That should be enough for the error message to be displayed next to the parent element.
这应该足以让错误消息显示在父元素旁边。
You may need to change the width of the parent element to be less than 100%.
您可能需要将父元素的宽度更改为小于 100%。
I've tried your code and it is working perfectly fine for me. Here is a preview:
我试过你的代码，它对我来说非常好。这是一个预览：
I just made a very small adjustment to the message padding to make it fit in the line:
我只是对消息填充做了一个非常小的调整，以使其适合该行：
div.error {
padding: 2px 5px;
}
You can change those numbers to increase/decrease the padding on top/bottom or left/right. You can also add a height and width to the error message. If you are still having issues, try to replace the span with a div
您可以更改这些数字以增加/减少顶部/底部或左侧/右侧的填充。您还可以为错误消息添加高度和宽度。如果您仍然遇到问题，请尝试用 div 替换 span
<div class="group">
<input type="radio" class="checkbox" value="P" id="radio_P" name="radio_group_name"/>
<label for="radio_P">P</label>
<input type="radio" class="checkbox" value="S" id="radio_S" name="radio_group_name"/>
<label for="radio_S">S</label>
</div>
And then give the container a width (this is very important)
然后给容器一个宽度（这个很重要）
div.group {
width: 50px; /* or any other value */
}
About the blank page. As I said I tried your code and it is working for me. It might be something else in your code that is causing the issue.
关于空白页。正如我所说，我试过你的代码，它对我有用。可能是您的代码中的其他内容导致了问题。
回答by Paolo Bergantino
I use jQuery BeautyTipsto achieve the little bubble effect you are talking about. I don't use the Validation plugin so I can't really help much there, but it is very easy to style and show the BeautyTips. You should look into it. It's not as simple as just CSS rules, I'm afraid, as you need to use the canvas element and include an extra javascript file for IE to play nice with it.
我使用jQuery BeautyTips来实现你所说的小气泡效果。我不使用验证插件，所以我在那里帮不上什么忙，但它很容易设计和显示 BeautyTips。你应该调查一下。恐怕这并不像 CSS 规则那么简单，因为您需要使用 canvas 元素并包含一个额外的 javascript 文件，以便 IE 可以很好地使用它。
回答by Anthony
A few things:
一些东西：
First, I don't think you really need a validation error for a radio fieldset because you could just have one of the fields checked by default. Most people would rather correct something then provide something. For instance:
首先，我不认为你真的需要一个无线电字段集的验证错误，因为默认情况下你可以只检查一个字段。大多数人宁愿纠正一些东西，然后提供一些东西。例如：
Age: (*) 12 - 18 | () 19 - 30 | 31 - 50
is more likely to be changed to the right answer as the person DOESN'T want it to go to the default. If they see it blank, they are more likely to think "none of your business" and skip it.
更有可能更改为正确答案，因为该人不希望它变为默认值。如果他们看到它是空白的，他们更有可能认为“与您无关”并跳过它。
Second, I was able to get the effect I think you are wanting without any positioning properties. You just add padding-right to the form (or the div of the form, whatever) to provide enough room for your error and make sure your error will fit in that area. Then, you have a pre-set up css class called "error" and you set it as having a negative margin-top roughly the height of your input field and a margin-left about the distance from the left to where your padding-right should start. I tried this out, it's not great, but it works with three properties and requires no floats or absolutes:
其次，我能够在没有任何定位属性的情况下获得我认为你想要的效果。您只需向表单（或表单的 div 等）添加 padding-right 即可为您的错误提供足够的空间，并确保您的错误适合该区域。然后，您有一个名为“错误”的预先设置的 css 类，并将其设置为负边距顶部，大约为输入字段的高度，边距左侧大约为从左侧到填充右侧的距离应该开始。我试过了，它不是很好，但它适用于三个属性并且不需要浮点数或绝对值：
<style type="text/css">
.error {
width: 13em; /* Ensures that the div won't exceed right padding of form */
margin-top: -1.5em; /*Moves the div up to the same level as input */
margin-left: 11em; /*Moves div to the right */
font-size: .9em; /*Makes sure that the error div is smaller than input */
}
<form>
<label for="name">Name:</label><input id="name" type="textbox" />
<div class="error"><<< This field is required!</div>
<label for="numb">Phone:</label><input id="numb" type="textbox" />
<div class="error"><<< This field is required!</div>
</form>
回答by Anthony
Unfortunately I can't comment with my newbie reputation, but I have a solution for the issue of the screen going blank, or at least this is what worked for me. Instead of setting the wrapper class inside of the errorPlacement function, set it immediately when you're setting the wrapper type.
不幸的是，我无法评论我的新手声誉，但我有解决屏幕空白问题的解决方案，或者至少这对我有用。不要在 errorPlacement 函数内部设置包装器类，而是在设置包装器类型时立即设置它。
$('#myForm').validate({
errorElement: "div",
wrapper: "div class=\"message\"",
errorPlacement: function(error, element) {
offset = element.offset();
error.insertBefore(element);
//error.addClass('message'); // add a class to the wrapper
error.css('position', 'absolute');
error.css('left', offset.left + element.outerWidth() + 5);
error.css('top', offset.top - 3);
}
});
});
I'm assuming doing it this way allows the validator to know which div elements to remove, instead of all of them. Worked for me but I'm not entirely sure why, so if someone could elaborate that might help others out a ton.
我假设这样做可以让验证器知道要删除哪些 div 元素，而不是所有这些元素。为我工作，但我不完全确定为什么，所以如果有人能详细说明这可能会帮助别人很多。
回答by Rodrigo
That answer really helped me, in my case i had to filter some elements out and have special aligment on their error div,
这个答案真的对我有帮助，在我的情况下，我必须过滤掉一些元素并在它们的错误 div 上进行特殊对齐，
errorPlacement:function(error,element) {
if (element.attr("id") == "special_element") {
// special align
} else { // default error scheme
error.insertAfter(element);
}
}
回答by ajaysoni98292
Add following css to your .validate method to change the css or functionality
将以下 css 添加到您的 .validate 方法以更改 css 或功能
errorElement: "div", wrapper: "div", errorPlacement: function(error, element) { offset = element.offset(); error.insertAfter(element) error.css('color','red'); }
errorElement: "div", wrapper: "div", errorPlacement: function(error, element) { offset = element.offset(); error.insertAfter(element) error.css('color','red'); }
回答by weisjohn
If you could provide some reason as to why you need to replace the label with a div, that would certainly help...
如果您可以提供一些理由说明为什么需要用 div 替换标签，那肯定会有所帮助...
Also, could you paste a sample that'd be helpful ( http://dpaste.com/or http://pastebin.com/)
另外，您能否粘贴一个有用的示例（http://dpaste.com/或http://pastebin.com/）
