为什么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();
    }
});

Answer 2

我认为你应该在向它添加新消息之前清除$（'＃alert-message'）。

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