Validador universal de formularios

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>