I am doing a login system and it is happening that every time the user presses the connect (send) button the message accumulates, and the goal was to only appear once every time the user clicks the connect button .
(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>