统一更改jquery validator的错误样式,方法是重写setting里的errorPlacement方法:jQuery.validator.setDefaults(errorPlacement:function(error,element){...});
用冒泡的方式的js代码如下:
errorPlacement: function(error, element) {
var errorLeft = element.position().left;
var elementTop = element.position().top + element.offsetParent().scrollTop();
error.css('left', errorLeft);
error.css('top', elementTop);
error.insertAfter(element);
error.width(element.width());
error.hide();
var errorTop = elementTop - error.height() - 4;
if(errorTop < 0){
errorTop = elementTop + element.height() + 4;
}
error.css('left', errorLeft);
error.css('top', errorTop);
element.mouseover(function(e){
if(element.hasClass('error')){
error.show();
}
});
element.mouseout(function(){
error.hide();
});
}
});
错误提示样式的css 代码:
input.error,textarea.error {
border: 1px solid red;
background: url("../images/invalid_line.gif") repeat-x scroll center bottom transparent;
}
label.error {
background-color: #E6E6E6;
border: 1px solid #aaaaaa;
display: none;
position: absolute;
color: #222222;
font-weight: normal;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}