为什么 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

我认为您应该先清除 $('#alert-message')，然后再向其添加新消息。

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

Answer 2

尝试使用 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();
    }
});

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

Why does jquery.validate.js show error messages twice?

javascript

jquery

jquery-validate