Question

I’m trying to make beatiful error form for a long period of time, but I’m missing something.
some
I want to place all my errors usingfrom jQuery validation plugin in some error container, and then hide it, when form is valid.

Of course, I want to make my form look good, so I need to add padding to elements.

If I add padding to error container, I will get this situation:
when field was valid, and then turned into valid I will have line, that have width of my container padding. Here is screenshot:

Here is 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 in view:

and js code:

     $(".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"

 })

Is it possible to make this stupif bug go away from my life ?

Any help will be appreciated.

Answer 1

Add the padding to the li elements themselves rather than the box.

#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/

Okay how about adding a success to the validate function, if I am reading you right it happens after an error and then a valid response.

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');
})