Estou fazendo um sistema de login e esta acontecendo que toda vez que o usuario aperta no botão de conectar(enviar) as mensagem se acumula, sendo que o objetivo era somente aparecer uma vez toda vez que o usuario clica de no botão conectar.
(document).ready(function(){
$("#conectar").click(function(){
var user = $("#user").val();
var senha = $("#senha").val();
// Checking for blank fields.
if( user =='' || senha ==''){
$('input[type="text"],input[type="password"]').css("border","2px solid red");
$('input[type="text"],input[type="password"]').css("box-shadow","0 0 3px red");
$("#mensagem").addClass("alert alert-danger").append("<strong>Cuidado!</strong> Certifique que os dados estejam inseridos");
}else {
$.post("logar.php",{ user: user, senha :senha},
function(data) {
if(data == 0) {
$('input[type="text"]').css({"border":"2px solid red","box-shadow":"0 0 2px red"});
$('input[type="password"]').css({"border":"2px solid red","box-shadow":"0 0 2px red"});
$("#mensagem").addClass("alert alert-danger").append("<strong>OPS!</strong> Usuário ou Senha Inválida");
}else if(data ==1){
window.location.href = "areaUsuario.php";
} else{
alert(data);
}
});
}
});
});
<form action="logar.php" class="form-horizontal" method="post">
<div class="form-group box-1">
<div class="col-md-12">
<input class="form-control" id="user" type="text" name="user" placeholder="E-mail ou Usuário" required />
<input id="senha" class="form-control" type="password" name="senha" value="" placeholder="Senha" required/>
</div>
<div class="col-md-12 box-1">
<button type="button" id="conectar" name="conectar" class="btn btn-primary col-sm-12">conectar</button>
</div>
<div class="col-md-12 box-1">
<div class="col-sm-6">
<a href="recuperar.php">Recuperar Acesso</a>
</div>
<div class=" col-sm-6">
<a href="cadastro.php">Cadastre-se</a>
</div>
</div>
<div class="col-md-12" id="mensagem" role="alert">
</div>
</div>