Validate CPF with Ajax and then submit the form

Question

Good night, you guys. I am in need of help, I am trying to do a validation and then send the fomulário, what I need basically is: When the user enters the CPF in the form, I want to do a check in the database, if Cpf is not registered, the form is sent, otherwise a message is shown on the same page.

            <form method="post" action="pesquisa.php" id="formulario">
            <div class="form-group">
                <label for="cpf">CPF:</label>
                <input type="text" class="form-control" id="cpf" name="cpf"  maxlength="14" placeholder="Digite o seu CPF" required>
            </div>    
            <div class="form-group">
                <label for="idade">Idade:</label>
                <input type="text" class="form-control" id="idade" name="idade" placeholder="Digite sua Idade" required>
            </div>
            <div class="form-check">
                <label>
                    <input type="radio" name="sexo" id="sexo" value="M"> <span class="label-text">Masculino </span>
                </label>
                <label>
                    <input type="radio" name="sexo" id="sexo" value="F"> <span class="label-text">Feminino </span>
                </label>
            </div>
            <br />
            <button type="submit" class="btn  btn-info" id="enviar">Iniciar Pesquisa</button>
            <input type="hidden" value="false" id="validado" name="validado">
        </form>

Javascript is like this:

$("#formulario").submit(function(e){
var cpf = $("#cpf").val();

if(validarCPF(cpf)){
    buscarCPF(cpf);
}else{
    e.preventDefault();
    $("#cpf").val('');
    $("#cpf").focus();
    return false;
}    
});
function buscarCPF(cpf){
var req;

cpf = cpf.replace(/[^\d]+/g, '');

if(window.XMLHttpRequest) {
   req = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
   req = new ActiveXObject("Microsoft.XMLHTTP");
}

var url = "busca.php?cpf="+cpf;
req.open("Get", url, true); 

req.onreadystatechange = function() {

    if(req.readyState == 1) {
        document.getElementById('resultado').innerHTML = 'Buscando CPF...';
    }

    if(req.readyState == 4 && req.status == 200) {
        var resposta = req.responseText;
        if(resposta != ""){
            document.getElementById('resultado').innerHTML = "<div class='alert alert-danger' role='alert'>CPF Já Cadastrado!</div>";
        }
    }
}
req.send(null);

}

The problem is that I don’t know how I do pro Ubmit only run if no data is returned in the search, I tried to use if, however by what I’ve been reading the search in the database is done asymptotically, then the form is sent, you have to submit the form only after searching the database?

Answer 1

The way you’re doing, you need to name the form:

<form method="post" action="pesquisa.php" id="formulario" name="formulario">

Put the e.preventDefault(); outside the if:

$("#formulario").submit(function(e){
   e.preventDefault();
..

And put a else on the return of Ajax to submit the form::

if(resposta != ""){
   document.getElementById('resultado').innerHTML = "<div class='alert alert-danger' role='alert'>CPF Já Cadastrado!</div>";
}else{
   document.formulario.submit();
}