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>