Check if the login exists in jQuery before submitting the form

Question

I need to develop a system in which when filling the customer’s registration, is verified if the registered email already exists in the database, and if it already exists, that informs the user (via Ajax) that he already has this registered email, and, otherwise, do the normal sending.

But I don’t want to have to click send first, to know if it exists or not... Is there any way to elaborate this?

Answer 1

An interesting way to do this is to fill in the field e-mail you use the method change jQuery to send an Ajax.

In PHP he will make a select checking whether this email exists in the database, and if it exists, you can show a message that the email already exists in the success ajax.

Example:

var email = $("#email");
email.change(function() {
  $.ajax({
    url: 'teste.php',
    type: 'POST',
    data: email.val(),
    dataType: 'json',
    success: function(data) {
      console.log(data);
      if (data.email) { // se existir
        $("#resposta").append('Ja existe um usuario cadastrado com este email');
      }

    },
    error: function() {
      $("#resultado").show().fadeOut(5000);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='text' id='email'>
<div id='resposta'></div>

In php do a test just returning true to see if the return of ajax is working, after that you can do the select and put the proper return:

   $output = true;
   echo json_encode($output);

Answer 2

I know it’s been a long time this post, but here’s something that might help you, you could simulate sending the form with a div or button styled as Submit button, follow the idea below:

$(document).ready(function(){
  
  $('#bs-em .button').on('click', function(){
    var email = $('#email').val();


    //Envia o valor de email através do método POST para a página verify 
//para verificar se o email já existe, caso exista ele retorna falso 
//através do parâmetro 'e' da função, se não existe ele retorna true, 
//aí é só comparar esses valores, e caso seja true, você usa o método submit()
 //para poder submeter o formulário a página insert.php. Você também pode usar $.ajax.


    $.post('configs/verify.php', {email: email}, function(e){
      //Então você faz uma comparação de valores, entre false e true
      if(e == false){
        alert("Desculpe, o email informado já existe.");
      }else{
        $('#bs-em').submit();
      }
    });
  });
});

//O código JQuery está um pouco genérico, pq estou fazendo diretamente 
//pelo pt.stackoverflow, então não pude testar o código ainda, caso der algum erro, 
//me avisa, provavelmente pode dar em duas coisas, ou na forma que fiz a comparação 
//do parâmetro 'e', ou então o if dentro da função $.post, por isso eu queria testar, 
//mas qualquer coisa me avisem, a ideia é mais ou menos essa, verificar se existe 
//antes de submeter o formulário

*{
  margin: 0;
  padding: 0;
}
body{
  background-color: #333;
}
form{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 300px;
  height: 100px;
  background-color: #dcdcdc;
  padding: 8px;
  box-shadow: 2px 2px 6px 0;
}
form input[type=text]{
  border: 0;
  width: 284px;
  height: 30px;
  font-family: arial, sans-serif;
  font-size: 14px;
  padding: 7px;
}
form .button{
  width: 130px;
  height: 35px;
  background-color: #45349d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: arial, sans-serif;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  margin-top: 7px;
  box-shadow: 2px 2px 4px 1px #222;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<form action="insert.php" method="post" id="bs-em">
  <input type="text" name="email" class="email" id="email" placeholder="Inserir E-mail aqui" />
  <div class="button">ENVIAR</div>
</form>

I hope I helped you guys! Thanks