javascript - 为什么 jquery.validate.js 会显示两次错误消息？

Question

我正在尝试使用 jQuery 验证创建表单，这是我的表单， 然后我使用这段代码来验证输入。

简单明了:

$('#forgot_pwd').validate({
    debug: true,
    rules: {
        username: {
            minlength: 6,
            required: true,

        },
        email: {
            required: true,
            email: true
        }
    },
    messages: {
            username: {
                required: "Enter your Username"
            },
            email: {
                required: "Enter your Email",
                email: "Enter valid email address"
            },
        },

     errorPlacement: function(error, element) {
            error.hide();
            $('.messagebox').hide();
            error.appendTo($('#alert-message'));
            $('.messagebox').slideDown('slow');



        },
    highlight: function(element, errorClass, validClass) {
            $(element).parents('.control-group').addClass('error');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parents('.control-group').removeClass('error');
            $(element).parents('.control-group').addClass('success');
        }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>

<div class="card">
    	<h4 class="l-login">Forgot Password</h4>
    	<div class="messagebox">
    		<div id="alert-message"></div>
    	</div>
    	<form class="col-md-12" id="forgot_pwd" method="POST">
    			<div class="form-group form-float">
    				<div class="form-line">
    					<input type="text" class="form-control" id="username" name="username">
    					<label class="form-label">Username</label>
    				</div>
    			</div>
    			<div class="form-group form-float">
    				<div class="form-line">
    					<input type="email" class="form-control" id="email" name="email">
    					<label class="form-label">Email</label>
    				</div>
    			</div>
    			
    			<button id="signin" type="submit" class="btn btn-raised waves-effect bg-red" data-loading-text="Loading...">Reset Password</button>
    
    			<a href="sign-up.php" class="btn btn-raised waves-effect" type="submit">SIGN UP</a><br/><br/>
    		</form>
    </div>

至于我，我只调用了一次错误消息框，但它出现了两次。 不确定为什么会出现两次。

这是为什么？

Answer 1

尝试使用 invalidHandler函数清空它。

invalidHandler: function() {
    $('#alert-message').empty();
}

当提交表单并且您的规则失败时，这将清空 #alert-message。这将允许多次调用 errorPlacement 函数，而不会在出现多个错误时清空 #alert-message。

例如在您的代码中。

$('#forgot_pwd').validate({
    debug: true,
    rules: {
        username: {
            minlength: 6,
            required: true,

        },
        email: {
            required: true,
            email: true
        }
    },
    messages: {
        username: {
            required: "Enter your Username"
        },
        email: {
            required: "Enter your Email",
            email: "Enter valid email address"
        },
    },

    errorPlacement: function(error, element) {
        error.hide();
        $('.messagebox').hide();
        error.appendTo($('#alert-message'));
        $('.messagebox').slideDown('slow');
    },
    highlight: function(element, errorClass, validClass) {
        $(element).parents('.control-group').addClass('error');
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).parents('.control-group').removeClass('error');
        $(element).parents('.control-group').addClass('success');
    },
    invalidHandler: function() {
        $('#alert-message').empty();
    }
});