Error message if e-mail already exists in the database

Asked

Viewed 31 times

0

I have a user registration and I need an error message to appear if the user tries to register an email that already exists in the Bank. I wanted a message in the field itself. How can I do??

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Apitec</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/register.css">

</head> 
<body>

	<form  method="post" action="api/cadastrarApicultorApiario.php" class="apicultor" style="top: 80%">
		<img src="img/logo1.png" style="margin-bottom: 20px" alt="" width="150px">
		
		

		<h3 style="margin-top: -10px; margin-bottom: 20px; font-size: 22px;" >Apicultor</h3>
		<div id="MsgCadastroErro" class="alert alert-danger hide" role="alert">
			Preencha todos os campos!
		</div>
		<div class="form-row">
			<div class="form-group col-md-6">
				<input name="nome_apicultor" type="text" class="form-control" id="nome_apicultor" placeholder="Nome*" required>
			</div>
			<div class="form-group col-md-6">
				<input name="sobrenome_apicultor" type="text" class="form-control" id="sobrenome_apicultor" placeholder="Sobrenome*" required>
			</div>
		</div>
		<div class="form-row">
			<div class="form-group col-md-6">
				<input name="email_apicultor" type="email" class="form-control" id="email_apicultor" placeholder="E-mail*" required>
			</div>
			
			<div class="form-group col-md-6">
				<input name="senha_apicultor" type="password" class="form-control" id="senha_apicultor" placeholder="Senha* - 8 dígitos" required maxlength="8">
			</div>
		</div>
		


		<p style="font-size: 15px;">* Campos obrigatórios</p>
		<button  onclick="Registrar()" type="send" class="btn btn-warning btn-block" style="font-weight: bold;">Cadastrar</button>

	</form>	

	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/popper.min.js"></script>
	<script type="text/javascript" src="js/jquery.mask.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/register.js"></script>
	<script type="text/javascript" src="js/celular_fixo_cadastro.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</body>
</html>

php javascript database

1 answer

0

As you use the bootstrap you can use some very interesting classes, I will give an example of one of them that I use and I find very interesting. Follows the documentation of the classes 

$("#salvar").on("click", function() {
  var email = $("#email").val();
  var emails = new Array('[email protected]', '[email protected]');
  $("#email").removeClass();

  if (emails.indexOf(email) != -1) {
    $("#email").addClass("form-control is-invalid");
    $("#returnErrorEmail").prop("class", "invalid-feedback");
    $("#returnErrorEmail").text("E-mail já está em uso, informe outro!");
  } else {
    $("#email").addClass("form-control is-valid");
    $("#returnErrorEmail").prop("class", "valid-feedback");
    $("#returnErrorEmail").text("E-mail válido!");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<input type="email" class="form-control" id="email" placeholder="Informe seu e-mail" required>
<div class="invalid-feedback" id="returnErrorEmail"></div>
<button class="btn btn-primary" id="salvar">Salvar</button>

Browser other questions tagged php javascript database

You are not signed in. Login or sign up in order to post.