Cambiar color de un input cuando hay error

[fedefrankk]

Hola a todos,
Quiero validar un correo y funciona bien, si el correo no es valido me devuelve a la misma pagina, de esta manera

Código PHP:

<?
$mail=$_POST['cliemail'];
 
 
    if(($mail!= "")&&(filter_var($mail, FILTER_VALIDATE_EMAIL))){
     //echo "email valido "; 
    }else{
 
        //echo "mail NO valñido";     
        header("Location:01.php");
        
}
?>
 

el input con nombre email tiene su CSS con un color de borde azul, y lo llamo con la classe: asi

Código HTML:

<p class="tex1">Cliente E-mail</p>
  <input type="email" name="cliemail"  id="email" maxlength="30" size="30" />
 

Lo que quiero es en el header mandar algo para que el borde del input cambie a rojo

header("Location:01.php?ACA QUE MANDO? ");

Bueno espero que se entienda saludos a todos
fede

[rauldev]

Si lo quieres hacer con js, agrégale una clase css con un .addClass(class); cuando sea incorrecto o directamente con .css('border-color'.'red');

saludos

[Alexis88]

Se me ocurre que envíes un valor así:

Código PHP:

header("Location:01.php?foo=baz");
 

Y en el archivo 01.php:

Código Javascript:

var url = document.URL,
    foo = url.substr(url.indexOf('=') + 1);
 
document.getElementById("email").style.border = ".1em " + (foo == 'baz' ? 'red' : 'blue') + " solid";
 

Como envías el valor por la URL, solamente necesitas ubicarlo y verificar su existencia, de acuerdo a ello, asignas el color rojo o azul al borde de la caja de texto.

Saludos

[ShinFDuran]

Mi recomendación sería primero añadir una validación de JavaScript con una expresión regular para saber si el correo es válido, con eso se cubriría la mayor parte de los casos. En caso de que no fuera válido seguir el consejo de rauldev.

Yo uso una validación similar que comprueba y al darle a enviar revisa el correo, si no es correcto o está vacío envía un alert y en caso contrario envía el formulario:

Código Java:

function validate(){        
    var email = document.getElementById("email").value;
    if (email == null || email.length == 0){
        alert("Introduzca un email");
        return false;
    }else if (!(/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/.test(email))){
        alert("La dirección de email es incorrecta");
        return false
    }
 
    //alert("Datos correctos.");
    return true;
}
 

Igualmente, mantén la validación por php por si algún listillo le da por desactivar JavaScript, pero la mayoría de usuarios habituales con el check por JavaScript sobrados y te ahorras tener que estar recargando la página para hacer la comprobación.

[fedefrankk]

Hola esta muy bueno lo de Alexis88, no sabia que se podia mandar variables de php y tomarlas con javascript.. excelente...!!!!

por otro lado lo de valifar el mail lo hice con html5, <input type="email".. no se si sirve para todos los navegadores por eso tambien lo hice en PHP.

Vi mucho codigo ShinFDuran, me valida el formulario pero pasa, osea me sale el correo es invalido pero pasa a la otra pagina..

<form action="02.php" method="post" onsubmit = validate()>
<input type="email" name="email" id="email">
<input type="submit" name "submit" value="guardar">

en este fomulario como llamo a la funcion ??

se agradece todos los comentarios muchas gracias
saludos
fede

[ShinFDuran]

Así:

Código HTML:

<form action="contacto2.php" method=post  onsubmit="return validate()">
 

A mi me funciona tanto en Firefox como en Chrome, así que en teoría salvo IE y sus dichosas versiones debería funcionar bien en todo.

Desde mi punto de vista, lo ideal es hacerlo inicialmente de esa forma, así evitamos tener que recargar la página, es todo un proceso más fluido. Igual, en el código me falta un ; después del segundo false, pero igual va el código y evita enviar los datos mientras no sean correctos.

[fedefrankk]

Hola, ShinFDuran, muchas gracias por tu repuesta, si me han dicho el tema de no madar datos cuando no son correctos... pero como esconder un header.... algunas cosas las hago con fomulario mediante post, asi no se ve nada.. pero el header es necesario pero no se si existe forma de hacerlo de otra manera ... en fin
Mientras tanto se agradece el codigo si sirvio

Muchas gracias
saludos
fede

[Alexis88]

Podrías enviar los datos del formulario a un archivo externo que los procese y devuelva una respuesta, en base a esa respuesta, envías los datos o muestras una alerta. Para que no se recargue la página, te conviene hacerlo mediante una petición asíncrona (Ajax).

Saludos

[fedefrankk]

Hola estoy entrando el el mundo Javascript ,Ajax, DOM, etc.. me cuesta y mucho, he buscado manuales para de cero cero" y no hay caso no encuentro.

saludos a todos
fede

[PHPeros]

Iniciado por fedefrankk

Hola estoy entrando el el mundo Javascript ,Ajax, DOM, etc.. me cuesta y mucho, he buscado manuales para de cero cero" y no hay caso no encuentro.

saludos a todos
fede

Corrijo: No sabes buscar

[fedefrankk]

Hola PHPeros, como va, si alomejor es no saber buscar, tenes alguna sugerencia o pagina que me puedas pasar?
Gracias
saludos
fede