0

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>

1 Resposta 1

1

Onde estiver usando o .append substitua por .html:

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

O método append acrescenta no elemento a string passada como parâmetro. O comportamento que você espera é que a mensagem antiga seja sobrescrita com a nova, que é o que o método html faz.

Leia mais em:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .