Repetitive java script message

Question

I’m making a login system and it’s happening that every time the user presses the connect (send) button the messages accumulate, and the goal was only to appear once every time the user clicks on 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>

Answer 1

Where are you using the .append replace with .html:

$("#mensagem").addClass("alert alert-danger").html("<strong>OPS!</strong> Usuário ou Senha Inválida");

The method append adds the string passed as parameter in the element. The behavior you expect is that the old message is overwritten with the new, which is what the method html ago.

Read more on:

• append
• html