[英]jQuery override default validation error message display (Css) Popup/Tooltip like
我正在尝试使用div而非标签代替默认错误消息标签。 我也看了这篇文章 ,并获得了如何做的方法,但是我对CSS的限制困扰着我。 我该如何像以下示例所示显示它:
Example#1(Dojo) -必须输入无效的输入才能看到错误显示
范例#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>
您可以使用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());
}
等等。 您可以参考有关css的jQuery文档以获得更多选项。
这是我使用的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;
}
您可以更改这些数字以增加/减少顶部/底部或左侧/右侧的填充。 您还可以在错误消息中添加高度和宽度。 如果仍然有问题,请尝试将span替换为div
<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 */
}
关于空白页。 正如我所说的,我尝试了您的代码,它正在为我工作。 可能是代码中的其他原因导致了问题。
我使用jQuery BeautyTips来实现您正在谈论的小气泡效果。 我不使用Validation插件,所以在那里我帮不上什么忙,但是样式设置和显示BeautyTips很容易。 您应该调查一下。 恐怕它不像CSS规则那么简单,因为您需要使用canvas元素,并包括一个额外的javascript文件以供IE很好地使用。
不幸的是,我无法以新手的声誉发表评论,但是我有解决屏幕变黑问题的方法,或者至少这对我有用。 代替在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进行特殊处理,
errorPlacement:function(error,element) {
if (element.attr("id") == "special_element") {
// special align
} else { // default error scheme
error.insertAfter(element);
}
}
一些东西:
首先,我不认为您真的不需要对无线电字段集进行验证错误,因为您可以只默认检查其中一个字段。 大多数人宁愿改正某些东西然后提供一些东西。 例如:
Age: (*) 12 - 18 | () 19 - 30 | 31 - 50
因为该人不希望使用默认答案,因此更有可能更改为正确答案。 如果他们认为这是空白,则他们更有可能认为“您的业务无关”而将其跳过。
其次,我可以在没有任何定位属性的情况下获得您认为想要的效果。 您只需在表单(或表单的div,无论如何)上添加padding-right即可为错误提供足够的空间,并确保您的错误适合该区域。 然后,您预先设置了一个称为“错误”的css类,并将其设置为负的margin-top(大约是您输入字段的高度),而margin-left的范围是从左侧到您的padding-right的距离应该开始。 我尝试了一下,虽然不是很好,但是它可以使用三个属性,并且不需要浮点数或绝对值:
<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>
将以下CSS添加到您的.validate方法中,以更改CSS或功能
errorElement: "div", wrapper: "div", errorPlacement: function(error, element) { offset = element.offset(); error.insertAfter(element) error.css('color','red'); }
如果您可以提供一些理由说明为什么需要用div替换标签,那肯定会有所帮助...
另外,您是否可以粘贴一个有用的示例( http://dpaste.com/或http://pastebin.com/ )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.