El siguiente ejemplo es un validador universal de formularios realizado en JavaScript. Tiene en cuenta campos obligatorios, númericos, string y de correo. Pero lo mejor es que podemos utilizarlo en cualquiera de nuestros formularios sin cambiar nada de código, sino tan sólo con seguir unas pequeñas reglas en la construcción de éstos.
Un ejemplo de uso
Veamos en primer lugar un ejemplo. Ir rellenando los campos con diferentes valores y observar los mensajes de error que proporciona.
El código
A continuación podrás ver el código que permite este validador universal de formularios. Pero antes unas instrucciones de uso:
Para que el validador sepa de qué tipo son los campos tendrás que utilizar el parámetro NAME de cada campo de texto de un modo especial. El primer carácter de dicho parámetro será:
- s si es de tipo string (cadena de caracteres)
- n si es de tipo numérico
- e si es de tipo e-mail (dirección de correo electrónico)
A su vez el segundo carácter será:
- r si es obligatorio rellenarlo
- o si es opcional
IMPORTANTE: En la versión 3.x del Explorer no funciona la instrucción length y hay que sustituir el document.forms.length por el número de elementos que contiene el formulario.
<script language="JavaScript"> <!-- Oculta el codigo a navegadores antiguos // AUTOR: Enric Cappellani // Modificado ligeramente por Daniel Rodriguez // Variables Globales var swOK=0; var nEle=0; var sError=''; // VERIFICA EL FORMULARIO //=================================== function Verifica() { var nTot=0; var nPas=0; var nTorna=0; sError="Lista de errores: "+""; for (var j=0; j<6; j++) nEle=j; // AVERIGUA LOS TIPOS var sNom=document.forms[0].elements[j].name; var sOne=sNom.substring(0,1); var sTwo=sNom.substring(1,2); // CORREO OBLIGATORIO if (sOne=='e' && sTwo=='r') { CaracterNoValid(document.forms[0].elements[j].value,'Er'); nTot+=swOK; } else if (sOne=='e' && document.forms[0].elements[nEle].value!='') { CaracterNoValid(document.forms[0].elements[j].value,'Eo'); nTot+=swOK; } // NUMERICO Y OBLIGATORIO else NUMERICO NO OBLIGATORIO PERO INFORMADO if (sOne=='n' && sTwo=='r') { CaracterNoValid(document.forms[0].elements[j].value,'Nr'); nTot+=swOK; } else if (sOne=='n' && document.forms[0].elements[nEle].value!='') { CaracterNoValid(document.forms[0].elements[j].value,'No'); nTot+=swOK; } // CADENA Y OBLIGATORIA if (sOne=='s' && sTwo=='r') { CaracterNoValid(document.forms[0].elements[j].value,'Sr'); nTot+=swOK; } // LISTA DE ERRORES if (nPas==0 && nTot>0) { document.forms[0].elements[nEle].focus() nPas=1 } } if (nTot>0) alert(sError) else document.forms[0].submit(); } // ANALIZA CAMPO A CAMPO SI SON NUMERICOS //========================================= function CaracterNoValid(pCaracter,pType) { swOK=0; // E-MAIL OBLIGATORIO if (pType=='Er') { swOK=2 for (var i=0;i<pCaracter.length;i++) var sByte=pCaracter.substring(i,i+1); if (sByte=="@" || sByte==".") { swOK=swOK-1; } } if (swOK>0) sError+="Campo " + document.forms[0].elements[nEle].name.substr(2) + " ha de ser e-mail y es obligatorio" +""; return; } // NUMERICO OBLIGATORIO if (pType=='Nr') { swOK=0; if (pCaracter=='') { swOK=1 sError+="Campo " + document.forms[0].elements[nEle].name.substr(2) + " ha de ser numárico y es obligatorio" +"" return } for (var i=0;i<pCaracter.length;i++) var sByte=pCaracter.substring(i,i+1); if (sByte<"0" || sByte>"9") { sError+="Campo " + document.forms[0].elements[nEle].name.substr(2) + " ha de ser numárico y es obligatorio" +"" swOK=1; return; } } } // NUMERICO INFORMADO if (pType=='No') { swOK=0; if (pCaracter=='') { swOK=1 sError+="Campo " + document.forms[0].elements[nEle].name.substr(2) + " ha de ser numárico y NO es obligatorio" +"" return } for (var i=0;i<pCaracter.length;i++) var sByte=pCaracter.substring(i,i+1); if (sByte<"0" || sByte>"9") { sError+="Campo " + document.forms[0].elements[nEle].name.substr(2) + " ha de ser numárico y NO es obligatorio" +"" swOK=1; return; } } } // CADENA if (pType=='Sr') { if (pCaracter=='') { sError+="Campo " + document.forms[0].elements[nEle].name.substr(2) + " ha de ser texto y es obligatorio"+"" swOK=1; return } } } // --> </script>
Y este es el código de una página de ejemplo:
<html> <body bgcolor="#ffffff"> <!--- E J E M P L O ----> <table> <form action="/scripts/xxx.idc" method="post"> <tr><td><i>A - Campo string requerido</i> </td> <td><input type="text" name="srA" value=""> </td></tr> <tr><td><i>B - Campo numárico opcional</i> </td> <td><input type="text" name="noB" value=""> </td></tr> <tr><td><i>C - Campo numárico requerido</i> </td> <td><input type="text" name="nrC" value=""> </td></tr> <tr><td><i>D - Campo e-mail requerido</i> </td> <td><input type="text" name="erD" value=""> </td></tr> <tr><td><i>E - Campo e-mail opcional</i> </td> <td><input type="text" name="eoE" value=""> </td></tr> <tr><td colspan=2><input type="button" OnClick="Verifica()" value="Confirmar"> </td></tr> </form> </table> </body> </html>