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 に答える