Estilos para los Alerts

[Alexis88]

Un ejemplo corto:

Código HTML:

<form id="registro" method="POST" action="validar.php">
    <label>E-mail:</label>
    <input type="email" name="correo" />    
    <input type="submit" value="Validar" />
</form>
 

Código Javascript:

document.querySelector("#registro").addEventListener("submit", function(event){ //Cuando se procese el formulario
    event.preventDefault(); //Cancelamos el envío
 
    var ajax = new XMLHttpRequest(), //Instancia del objeto XMLHttpRequest
        method = this.method, //Método HTTP establecido en el atributo "method" del formulario
        url = this.action, //Ruta del archivo establecida en el atributo "action" del formulario
        async = true; //La petición será asíncrona
    
    ajax.open(method, url, async); //Se establecen los parámetros y se inicia la petición
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //Establecemos las cabeceras respectivas
    ajax.addEventListener("load", function(){ //Una vez que se haya completado el proceso
        if (this.status == 200){ //Si fue satisfactorio
            var mensaje = this.responseText; //Obtenemos la respuesta
            /* Aquí muestras el mensaje en tu ventana modal */
        }
    }, false);
    ajax.send("email=" + document.querySelector("[name=correo]").value); //Enviamos el dato escrito por el usuario
}, false);
 

Código PHP:

$connection = new mysqli('localhost', 'user', 'password', 'database');
if ($connection->connect_errno) exit($connection->connect_errno . ': ' . $connection->connect_error);
 
$email = $connection->real_escape_string(strip_tags(trim($_POST['email'])));
$query = "SELECT users_email FROM tbl_users WHERE users_email LIKE '%$email%'";
$results = $connection->query($query) or exit($connection->error);
 
if ($results->num_rows){
    echo 'Este e-mail ya existe';
}
else{
    echo 'Este e-mail está disponible';
}
 
$results->free();
$connection->close();
 

En el ejemplo, cuando el usuario procesa el formulario, se cancela el envío de los datos (que implica la recarga de la ventana) y se ejecuta una petición asíncrona hacia la dirección establecida en el atributo action del formulario, enviando el valor escrito en la caja de texto contenida en el formulario. Una vez que en el archivo PHP se realiza la conexión a la base de datos y se busca el correo electrónico, se imprime una respuesta, ya sea que se haya encontrado coincidencias (el correo electrónico ya fue registrado) o no (está disponible). Finalmente, dicha impresión retorna al primer archivo como respuesta a la petición, de tal modo que, cuando se complete el proceso de forma satisfactoria, puedes mostrar el mensaje en la ventana modal.