统一更改jquery validator的错误样式

来源：互联网发布：java面试算法编程题编辑：程序博客网时间：2024/06/05 15:18

统一更改jquery validator的错误样式，方法是重写setting里的errorPlacement方法：jQuery.validator.setDefaults(errorPlacement:function(error,element){...});

用冒泡的方式的js代码如下：

jQuery.validator.setDefaults({
    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;
   }