Question

我正在使用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的相同代码）正在运行，但它仅在第二次点击时添加

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

我做错了什么？

Answer 1

我建议您使用以下方法为各个错误字段添加和删除类

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

如何在jQuery验证插件中使用invalidHandler选项将CSS类添加到无效输入的父级？

1 个答案: