Estilos para los Alerts

[KATHYU]

Buen dia, alguien sabe como se le puede poner de manera correcta y que funcione con PHP, estilos a los alert de JS ??

He probado muchas formas ESTAS y tambien varias de ESTAS pero no logro hacer que mi Alert trabaje bien.

Explico: tengo un codigo que toma los post del index para hacer el login y cuando usuario y pass no funcionan pues quiero que el alert tenga estilo

Código PHP:

  echo " <script language='JavaScript'>alert('Usuario invalido !!!');
    window.location.replace('../../');
    </script>";  
   

Esa es una forma de alert

Otra seria

Código PHP:

      if(empty($_SESSION['username'])) {
        echo"<script language='JavaScript'>window.location = '../resources/php'</script>";
    }  
   

Saben como ocupando las formas arriba mencionadas (las de los links) puedo hacer que funcionen ??

He probado de muchas formas, pero solo el html si hace bien los estilos pero una vez mezclo php en el documento, ahí ya no funcionan

[Alexis88]

Yo hago la verificación de datos utilizando una petición asíncrona (AJAX), de tal forma que, primero; envío los datos desde un formulario hacia un archivo PHP; segundo; los recibo en dicho archivo, hago la conexión con la BD, realizo la verificación y, según sea el resultado, retorno una respuesta al archivo original. Cuando se completa la petición (una vez que se recibe la respuesta desde el lado del servidor), utilizo una ventana modal (así como las de los ejemplos que encontraste) para mostrar el resultado. Y como puedo recibir valores desde el archivo PHP, tan solo los adhiero a los botones de la ventana modal de tal forma que, si deseara realizar una redirección hacia un lugar en el que es necesario utilizar un identificador, pues, ya lo tengo.

[KATHYU]

Buscare sobre validación con AJAX, pero tendrá algún ejemplo por ahí que pueda seguir ??

[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.