How to confirm if user exists with those "green ticks"

Question

They say it’s with javascript, but I searched the net and found nothing related...

Example of how I want it to stay:

Currently I do with Alerts, but I would like validation to leave a green light as the image (see right corner) in case of success and a red one in case of failure.

What I got so far:

if(isset($_POST["botao"])) {
$name        =  mysqli_real_escape_string($mysqli, $_POST["name"]);
$surname     =  mysqli_real_escape_string($mysqli, $_POST["surname"]);
$birthday    =  mysqli_real_escape_string($mysqli, $_POST["birthday"]);
$sex         =  mysqli_real_escape_string($mysqli, $_POST["sex"]);
$username    =  mysqli_real_escape_string($mysqli, $_POST["username"]);
$email       =  mysqli_real_escape_string($mysqli, $_POST["email"]);
$password    =  mysqli_real_escape_string($mysqli, $_POST["password"]);
$repassword  =  mysqli_real_escape_string($mysqli, $_POST["repassword"]);

if($name == "" || $surname == "" || $birthday == "" || $sex == "" || $username == "" || $email == "" || $password == "" || $repassword == "") {
echo "<script> alert('Preencha todos os campos.'); </script>";
return true;
}
if($password != $repassword) {
echo "<script> alert('As senhas devem ser iguais!'); </script>";
return true;
}
// FAZ A BUSCA NO BDD PRA VER SE O EMAIL JA EXISTE
$select = $mysqli->query("SELECT * FROM data WHERE email='$email'");
if(select) {
$row = $select->num_rows;
if ($row > 0) {
echo "<script> alert('Já existe um usuário com este e-mail!'); </script>";
} else {
// FAZ A BUSCA NO BDD PRA VER SE O USUARIO JA EXISTE
$select = $mysqli->query("SELECT * FROM data WHERE username='$username'");
if(select) {
$row = $select->num_rows;
if ($row > 0) {
echo "<script> alert('O Usuário já existe.'); </script>";
} else {
// CASO TUDO ESTIVER OK ELE INSERE AS INFORMAÇÕES NO BDD
$insert = $mysqli->query("INSERT INTO `data`(`name`, `surname`, `birthday`, `sex`, `username`, `email`, `password`, `status`) VALUES ('$name', '$surname', '$birthday', '$sex', '$username', '$email', '".md5($password)."', '0')");
if($insert) {
echo "<script> alert('Usuario registrado com sucesso!'); location.href='login.php' </script>";
}}}
else {
echo $mysqli->error;
}}
}}
?>

Thanks to anyone who tries to help me!

Answer 1

You can solve this problem using the Success callback of your AJAX request.

You can keep your validation logic existing, but you must return a result (result) to the AJAX function and invoke it whenever a button is clicked, or when the input is changed.

var username = $('#username').val();
    $('#username').change(function() {
       $.ajax({
          url: "validacao.php",
          type: 'POST',
          data: 'username=' + username,
          success: function(result){
                     if(result > 0){
                         // faça alguma coisa se o usuário já exista
                     }
                     else{
                         // faça alguma coisa se o usuário ainda não exista
                     }
                   }
          });
    });

If you don’t know AJAX well, you can take a look at this link, explains in more detail how AJAX requests work with an example similar to what you need to do :)