我正在尝试使用div而不是标签来覆盖默认错误消息标签。我也查看了this post并了解了如何做到这一点,但我对CSS的局限性让我很难受。我如何像其中一些例子那样显示:
Example #1 (Dojo) - 必须输入无效输入才能看到错误显示
Example #2
以下是一些示例代码,它将错误标签覆盖为div元素
$(document).ready(function(){
$("#myForm").validate({
rules: {
"elem.1": {
required: true,
digits: true
},
"elem.2": {
required: true
}
},
errorElement: "div"
});
});
现在我对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;
}
更新:
好的我现在正在使用此代码,但弹出窗口上的图像和位置大于边框,可以将其调整为动态高度吗?
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));
}
css与下面的相同(你的css代码)
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>
答案 0 :(得分:186)
您可以使用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);
}
});
});
您可以使用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());
}
等等。您可以参考jQuery documentation about css了解更多选项。
这是我用过的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;
}
以下是您需要的背景图片:
(来源:scriptiny.com)
如果要在一组选项或字段后显示错误消息。然后将一个容器内的所有元素分组为“div”或“fieldset”。例如,为所有这些“组”添加一个特殊类。并将以下内容添加到errorPlacement函数的开头:
errorPlacement: function(error, element) {
if (element.hasClass('group')){
element = element.parent();
}
...// continue as previously explained
如果您只想处理特定情况,可以使用attr代替:
if (element.attr('type') == 'radio'){
element = element.parent();
}
这应该足以让错误消息显示在父元素旁边。
您可能需要将父元素的宽度更改为小于100%。
我已经尝试过你的代码,它对我来说非常好。这是一个预览:
我只是对消息填充进行了一个非常小的调整,使其适合该行:
div.error {
padding: 2px 5px;
}
您可以更改这些数字以增加/减少顶部/底部或左/右的填充。您还可以在错误消息中添加高度和宽度。如果您仍有问题,请尝试用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>
然后给容器一个宽度(这非常重要)
div.group {
width: 50px; /* or any other value */
}
关于空白页面。正如我所说,我尝试了你的代码,它对我有用。您的代码中可能还有其他因素导致问题。
答案 1 :(得分:3)
我使用jQuery BeautyTips来实现您所谈论的小气泡效果。我没有使用Validation插件,所以我在那里帮不了多少,但它很容易打造并展示BeautyTips。你应该调查一下。它不像CSS规则那么简单,我担心,因为你需要使用canvas元素并为IE添加一个额外的javascript文件以便与它配合使用。
答案 2 :(得分:2)
一些事情:
首先,我认为您确实不需要无线电字段集的验证错误,因为您可以默认选中其中一个字段。大多数人宁愿纠正某些东西然后提供一些东西例如:
Age: (*) 12 - 18 | () 19 - 30 | 31 - 50
更有可能被更改为正确的答案,因为此人不希望它转到默认值。如果他们认为这是空白的,他们更有可能认为“没有你的业务”并且跳过它。
其次,我能够在没有任何定位属性的情况下获得我认为你想要的效果。您只需在表单中添加填充权限(或表单的div,无论如何),为您的错误提供足够的空间,并确保您的错误适合该区域。然后,你有一个预先设置的css类叫做“error”,你把它设置为负边距 - 大致是输入字段的高度,左边距离是左边距离你的填充右边的距离应该开始。我尝试了这个,它不是很好,但它适用于三个属性,不需要浮点数或绝对值:
<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>
答案 3 :(得分:2)
不幸的是我无法评论我的新手声誉,但我有一个解决屏幕问题的问题,或者至少这对我有用。而不是在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);
}
});
我假设这样做允许验证器知道要删除哪些div元素,而不是所有div元素。为我工作,但我不完全确定为什么,所以如果有人可以详细说明,可能会帮助其他人。
答案 4 :(得分:2)
这个答案对我有帮助,在我的情况下,我必须过滤掉一些元素并对其错误div进行特殊的对齐,
errorPlacement:function(error,element) {
if (element.attr("id") == "special_element") {
// special align
} else { // default error scheme
error.insertAfter(element);
}
}
答案 5 :(得分:1)
将以下css添加到.validate方法中以更改css或功能
errorElement: "div", wrapper: "div", errorPlacement: function(error, element) { offset = element.offset(); error.insertAfter(element) error.css('color','red'); }
答案 6 :(得分:0)
如果您能提供一些理由说明为什么需要用div替换标签,那肯定有帮助......
另外,您可以粘贴一个有用的示例(http://dpaste.com/或http://pastebin.com/)