1

jQuery 検証プラグインを使用してフォームを検証しています。入力にクラス エラーがある場合、親 div にスタイリングを追加しようとしています。

hereを見てinvalidHandlerオプションを見つけましたが、上書きしようとすると、検証がまったく機能しなくなりました。

ここに私のjsコードがあります:

$(".sign_up").validate({
    invalidHandler: function(form, validator) {
        if (errors) {
            $("errorContainer").show();
            $(':input').each(function() {
                if ($(this).hasClass('error')) {
                    $(this).parent().addClass('bg2');
                }
            });

        }
        else {
            $("errorContainer").hide();
            $(':input').each(function() {
                $(this).parent().removeClass('bg2');
            })
        };
    },
    rules: {

        "user[email]": {
            required: true,
            email: true,
            remote: {
                type: "get",
                dataType: "json",
                url: url_name.concat("checkemail"),
                async: false
            },
        },
        'user[password]': {
            required: true,
            minlength: 6
        },
        'user[password_confirmation]': {
            equalTo: "#passs",
            minlength: 6,
            required: true
        }
    },
    messages: {
        "user[email]": {
            remote: "This email is already taken"
        },
        'user[password]': {
            required: "Password is required",
            minlength: "Your password is too short"
        },
        'user[password_confirmation]': {
            equalTo: "Your password confirmation doesn't match",
            required: "Enter password confirmation"
        }

    },
    onsubmit: true,
    onkeydown: true,
    onkeyup: false,
    onfocusin: false,
    onfocusout: false,
    errorContainer: "#messageBox2",
    errorLabelContainer: "#messageBox2 ul",
    wrapper: "li"
})

私のHTMLフォーム：

  <form accept-charset="UTF-8" action="/users/sign_in" class="login" id="login" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"></div>
  <div id="messageBox1"> 
  <ul></ul>
</div>

<div class="field2">
  <label for="user_email">E-mail Adress</label>
  <input id="em" name="user[email]" size="30" type="email" value="">
</div>

<div class="field2">
  <label for="user_password">Password</label>
  <input class="passwords" id="user_password" name="user[password]" size="30" type="password">
</div>

 <div class="submit_login">
  <input class="btn go" id="check_login" name="commit" type="submit" value="Sign In">  
   </form>

次のコード（invalidHandlerと同じ）は機能していますが、2回目のクリックでのみ追加されています

$("#submit").click(function(){
    $(':input').each(function() {
        if ($(this).hasClass('error')) {
            $(this).parent().addClass('bg2');
        }
    });
})

私が間違っていることは何ですか？

4

1 に答える 1

0

次の方法を使用して、それぞれのエラーフィールドのクラスを追加および削除することをお勧めします

$(".sign_up").validate({
  rules:{//add your rules here
  },
  messages:{//add messages here
  },
  errorPlacement: function(error, element) {
   //here you will get error with label/wrapper element (ul in your case) and 
   //input element on for which the error is related to

   $(element).parent().addClass('bg2');
   $("errorContainer").show();//clearly mention if selector is a class or id
  },
  success: function(label) {
   //this part gets executed if a input fields has an error previously 
   //and successfully validated
   //here you will have only the error which was passed in the above function
   //ie errorPlacement
   //assuming that parent container holds the error label
   $(label).parents('.bg2').removeClass('.bg2');
  },
  submitHandler: function(form){
   //submit form here
  }
});
于 2012-10-23T10:24:19.737 に答える