javascript - 每次输入字段发生错误时，如何使用 jQuery Validate 显示和隐藏自定义错误消息？

Question

这就是我尝试验证我的表单的方式:HTML:

<form class="am-form amSignUpF">
                    <!-- Name -->
                    <div class="amSULabelCont">
                        <label for="name_f-0">Name</label>
                    </div>
                    <div class="amSUInputContainer">
                        <div class="amSUInputErrorCont" id="error_name_f-0"></div>
                        <input id="name_f-0" class="amSignUpField amName amFormControl" type="text" name="name_f">
                    </div>
                    <!-- Surname -->
                    <div class="amSULabelCont">
                        <label for="name_l-0">Surname</label>
                    </div>
                    <div class="amSUInputContainer">
                        <div class="amSUInputErrorCont" id="error_name_l-0"></div>
                        <input id="name_l-0" class="amSignUpField amSurname amFormControl" type="text" name="name_l">
                    </div>
                    <!-- Email -->
                    <div class="amSULabelCont">
                        <label for="email-0">E-mail</label>
                    </div>
                    <div class="amSUInputContainer">
                        <div class="amSUInputErrorCont" id="error_email-0"></div>
                        <input id="email-0" class="amSignUpField email amEmail required amFormControl" type="text" name="email">
                    </div>
                    <!-- Password -->
                    <div class="amSULabelCont">
                        <label for="pass-0">Password</label>
                    </div>
                    <div class="amSUInputContainer">
                        <div class="amSUInputErrorCont" id="error_pass-0"></div>
                        <input id="pass-0" class="amSignUpField amPassword amFormControl" type="password" name="pass">
                    </div>
                    <!-- Repeat password -->
                    <div class="amSULabelCont">
                        <label for="pass-confirm">Confirm Password</label>
                    </div>
                    <div class="amSUInputContainer">
                        <div class="amSUInputErrorCont" id="error_pass-confirm"></div>
                        <input id="pass-confirm" class="amSignUpField amConfirmpassword amFormControl" type="password" name="_pass">
                    </div>
                    <!-- Conditions & Privacy -->
                    <div class="amSULabelCBttm">
                        <div class="amSUInputContainer">
                            <div class="amSUInputErrorCont" id="error_i_agree-0"></div>
                            <input id="i_agree-0" type="checkbox" name="i_agree" value="1" class="amAgree">
                            <span class="testo_08">Accept <a href="" class="brCleL" target="_blank">conditions</a> and <a href="" class="brCleL" target="_blank">privacy</a></span>
                        </div>
                    </div>
                    <!-- Submit -->
                    <button id="reg-confirm" class="btn btn-warning large" name="buttonsubmit" type="submit">Registration</button>
                </form>

CSS:

    .amSUInputContainer {
        position: relative;
}

.amSUInputErrorCont {
        display: none;
        position: absolute;
        text-align: center;
        z-index: 99999;
        min-width: 200px;
        max-width: 500px;
        white-space: nowrap;
        font-size: 15px;
        left: 250px;
        top: -16px;
        border: 1px solid #962729;
        background: #CF2024;
        -moz-box-shadow: inset 0 1px 0px #E4494D;
        -webkit-box-shadow: inset 0 1px 0px #E4494D;
        box-shadow: inset 0 1px 0px #E4494D;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        color: white;
        padding: 2px 18px;
        text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

.showError {
        display: block;
}

还有 JS:

    $(function() {
        $(".am-form.amSignUpF").validate({
                errorElement: "div",
                errorContainer: "#errorContainer",
                errorPlacement: function (error, element) {
                        console.log("VALIDATE");
                        var elId = element.attr("id");
                        $(".amSUInputErrorCont#error_"+elId).append(error);
        },
                success: function(errorDiv) {
                        console.log(errorDiv);
                        console.log(errorDiv.find("amSUInputErrorCont"));
                        errorDiv.find("amSUInputErrorCont").removeClass("showError");
                },
                invalidHandler: function(event, validator) {
                        console.log(validator.currentElements);
                        validator.currentElements.each(function(){
                                var fieldId = $(this).attr("id");
                                $(".amSUInputErrorCont#error_"+fieldId).addClass("showError");
                        });
                }
        });

        $(".amName").rules("add", {
                required: true,
                minlength: 3,
                maxlength: 50,
                messages: {
                        required: "Insert your name.",
                        minlength: "min 3 chars.",
                        maxlength: "max 50 chars."
                }
        });

        $(".amSurname").rules("add", {
                required: true,
                minlength: 3,
                maxlength: 50,
                messages: {
                        required: "insert you surname.",
                        minlength: "min 3 chars.",
                        maxlength: "max 50 chars."
                }   
        });

        $(".amEmail").rules("add",{
                required: true,
                email: true,
                messages: {
                        required: "insert an e-mail address",
                        email: "insert a valid e-mail address",
                        minlength: "min 3 chars.",
                        maxlength: "max 50 chars."

                }
        });

        $(".amPassword").rules("add", {
                required: true,
                minlength: 3,
                maxlength: 50,
                messages: {
                        required: "provide a password.",
                        minlength: "min 3 chars.",
                        maxlength: "max 50 chars"
                }
        });

        $(".amConfirmpassword").rules("add", {
                required: true,
                equalTo: ".amPassword",
                messages: {
                        required: "confirm the password.",
                        equalTo: "password don't match."
                }
        });


        $(".amAgree").rules("add", {
                required: true,
                messages: {
                        required: "You must agree to our <br> terms and conditions"
                }
        });

});

这是 fiddle : http://jsfiddle.net/B5335/1/

当您单击“注册”按钮并且没有编译任何输入字段时，会出现所有错误，问题是，如果我在其中输入内容，当jquery调用验证的成功:回调时，错误不会消失。如何使每个错误 div 的错误在每次出现错误时显示，并在每次特定输入字段没有错误时消失？

感谢关注!

Answer 1

确保您使用的是最新的 jquery 验证插件。我更新了，您的示例现在可以运行了。