0

很长一段时间以来，我都在尝试制作漂亮的错误表单，但我错过了一些东西。一些我想将我所有的错误使用来自jQuery 验证插件放在某个错误容器中，然后在表单有效时隐藏它。

当然，我想让我的表单看起来不错，所以我需要为元素添加填充。

如果我将填充添加到错误容器中，我会遇到这种情况：当字段有效时，然后变为有效时，我将有线条，它具有容器填充的宽度。这是屏幕截图：

这是CSS：

  #messageBox1{
display:none;
padding-top: 10px;
padding-bottom: 10px;    
width:305px;
background-color: rgb(242, 222, 222);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
 }

视图中的 HTML：


和js代码：

     $(".login").validate({
    rules: {

        "user[email]":{
            email: true,
            required: true
        },
         'user[password]': {
            required: true,
            minlength: 6,
            remote: {
             url: url_name.concat("checkpass"),
            type: "get",
            data: {
              email: function() { return $("#user_email").val(); 
              }
            }

          }
        }
    },
    messages: {
    "user[email]": {
    remote: "You entered wrong email",
    required: "Your email is required"
    },
    'user[password]':{
    required: "Password is required",
    minlength: "Your password is too short",
    remote: "Your password is incorrect"
      }
    },
    errorContainer: "#messageBox1",
     errorLabelContainer: "#messageBox1",
     wrapper: "li"

 })

有没有可能让这个愚蠢的虫子从我的生活中消失？

任何帮助将不胜感激。

4

1 回答 1

1

将填充添加到 li 元素本身而不是框。

#messageBox1 li{padding: 5px 0;}
#messageBox1 li:first-child{padding: 10px 0 0 0;}
#messageBox1 li:last-child{padding: 0 0 10px 0;}

http://jsfiddle.net/calder12/Vn69J/

好的，如何将成功添加到验证功能，如果我没看错，它会在错误之后发生，然后是有效响应。

rules: {

    "user[email]":{
        email: true,
        required: true
    },
     'user[password]': {
        required: true,
        minlength: 6,
        remote: {
         url: url_name.concat("checkpass"),
        type: "get",
        data: {
          email: function() { return $("#user_email").val(); 
          }
        }

      }
    }
},
messages: {
"user[email]": {
remote: "You entered wrong email",
required: "Your email is required"
},
'user[password]':{
required: "Password is required",
minlength: "Your password is too short",
remote: "Your password is incorrect"
  }
},
errorContainer: "#messageBox1",
 errorLabelContainer: "#messageBox1",
 wrapper: "li"

},
success: function() {
 $('#messageBox1').css('display', 'none');
})
于 2012-10-17T20:18:24.623 回答