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

Question

I am trying to create form with jQuery validation and this is my form, Then I am using this code to validate the inputs.

It's just plain and simple:

$('#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>

As for me I am calling the error message box only once but it shows up twice. Not sure why it shows up twice.

why is that?

Answer 1

Try using the invalidHandler function to empty it.

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

This will empty the #alert-message when the form is submitted and your rules fail. This will allow the errorPlacement function to be called multiple times without emptying #alert-message on multiple errors.

For example in your code.

$('#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();
    }
});