Ver Mensaje Individual
  #154 (permalink)  
Antiguo 15/10/2003, 10:49
Avatar de KarlanKas
KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 20 años, 1 mes
Puntos: 61
156.-Una forma de validar un formulario iluminando errores

P.- Cómo validar el formulario de una forma sencilla iluminando los errores.
R.- Con este código. Es muy fácil añadir reglas. sólo se van poniendo en el orden de los inputs en el formulario las reglas con el numerito de orden que les corresponda y se utiliza la variable valor para referirse al valor de dicho input.

Para el mensaje de error lo mismo, se usa error con el numerito de orden de input entre corchetes y se pone entre comillas el mensaje de error.

Un ejemplo:
Código PHP:
<html>
<
head>
<
style>
form,td{font:normal 10px/10px verdana;}
input{font:normal 10px/10px verdana;border:solid 1px black}
</
style>
    <
title>Prueba</title>
    <
script>
//Script original de KarlanKas para forosdelweb.com
//Adaptado a firefox gracias a JavierB ;-)

    
colorMal="#eeddee";
    
colorBien="white";
    
    
regla=new Array()

    
regla[0]="valor.length<3";
    
regla[1]="isNaN(valor) || valor<600000000";
    
regla[2]="valor.lastIndexOf('@')!=valor.indexOf('@') || valor.indexOf('@')<2 || valor.lastIndexOf('.')<valor.length-4 || valor.lastIndexOf('.')>valor.length-3";

    
mensaje=new Array()


    
mensaje[0]="Por favor, introduzca el nombre";
    
mensaje[1]="El número de teléfono introducido no es válido";
    
mensaje[2]="correo inválido";
    
    function 
comprobar(){ 
    
errores=""
    
mensaje2="";
    for(
a=0;a<regla.length;a++){ 
    
valor=document.forms[0].elements[a].value
    if(eval(
regla[a])){
    
mensaje2=(mensaje[a])?mensaje[a]:"Por favor, rellene el campo "+document.forms[0].elements[a].name;
    
errores+=mensaje2+"<br>"
    
document.forms[0].elements[a].style.background=colorMal;} 
    else{
document.forms[0].elements[a].style.background=colorBien;} 
    } 
    
pepe=document.getElementById("herror");
    
pepe.style.background=(errores!="")?colorMal:colorBien
    
pepe.style.border=(errores!="")?"solid 1px black":"none"
    
pepe.innerHTML=errores

    return (
errores=="")
    } 
     
    
    
</script>
</head>

<body>
<form onsubmit="return comprobar()">
<table><tr><td>nombre:</td><td><input type=text name=nombre></td><td style="font:normal 10px/15px verdana;padding:5px 5px 5px 5px;"rowspan=10 valign="top" id="herror"></td></tr>
<tr><td>telefono:</td><td><input type=text name="telefono"></td></tr>
<tr><td>e-mail:</td><td><input type=text name="email"></td></tr>
<tr><td colspan=2 align="center"><input type="submit" value="enviar"></td></tr></table>

</form>


</body>
</html> 
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.

Última edición por KarlanKas; 19/12/2005 a las 15:45