1 . Un ejemplo de uso
2 . El código

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>

hola

Pongo aqui el código escrito en javascript corregido. Con éste código, se permite utilizar en los campos numéricos, números con decimales (usando la coma o el punto indistintamente) y además valida exactamente las direcciones de e-mail, usando la función propuesta por manz. También he incluido una nueva variable, Num, donde se debe indicar el número de los campos que se estan utilizando en el formulario: 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) { if (isMail(document.forms[0].elements[nEle])==true) { sError+="Campo "+document.forms[0].elements[nEle].name.substr(2)+" ha de ser e-mail y es obligatorio" +"r"; swOK=1; } return; } // E-MAIL NO OBLIGATORIO if (pType==Eo) { if (isMail(document.forms[0].elements[nEle])==true) { sError+="Campo "+document.forms[0].elements[nEle].name.substr(2)+" ha de ser e-mail y NO es obligatorio" +"r"; swOK=1; } return; } // NUMERICO OBLIGATORIO if (pType==Nr) { swOK=0; var punto=0; if (pCaracter==) swOK=1; else { for (var i=0;i1) swOK=1; } else { if (sByte"9") swOK=1; } } } if (swOK>0) { sError+="Campo "+document.forms[0].elements[nEle].name.substr(2)+" ha de ser numérico y es obligatorio" +"r" } return; } // NUMERICO NO OBLIGARORIO if (pType==No) { swOK=0; var punto=0; for (var i=0;i1) swOK=1; } else { if (sByte"9") swOK=1; } } if (swOK>0) { sError+="Campo "+document.forms[0].elements[nEle].name.substr(2)+" ha de ser numérico y NO es obligatorio" +"r" } return; } // CADENA if (pType==Sr) { if (pCaracter==) { sError+="Campo "+document.forms[0].elements[nEle].name.substr(2)+" ha de ser texto y es obligatorio"+"r" swOK=1; return } } } function isMail(obj){ var ValorCampo; var Form0=document.forms[0]; var error; ValorCampo=Form0.elements[obj.name].value; if(ValorCampo.search(/^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/) == -1){ error=true; } else error=false; return error; } // --> Saludos

Pues eso, que en los campos numéricos sólo valida números enteros, si tecleamos un número con decimales nos dice que no es correcto. Sin embargo la solución no pasa por incluir la coma (y/o el punto) decimal en la lista de caracteres, ya que hay que cmprobar también que sólo hay una. Saludos

Alguien me puede decir como hacer un formulario para que entre en una base de datos

Tengo un formulario con dos campos numéricos requeridos y sí los dejos en blanco igual me los pasa como si estubiesen llenos. Se llaman nrtelefono y nrfax pero nada de nada.

He podido comprobar como el campo requerido mail no valida correctamente. Si le escribimos esto: a@. la función lo da por bueno ya que solo comprueba que tenga una arroba y un punto. Os propongo esto: function isMail(obj){ var ValorCampo; var Form0=document.forms[0]; var error; ValorCampo=Form0.elements[obj.name].value; if(ValorCampo.search(/^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/) == -1){ error=true; } else error=false; return error; } Se llama a la función isMail(obj) y se le pasa el objeto del campo de formulario (this). Seguidamente se verifica su contenido con un patrón RegExp que es más fiable que solo comprobar que el campo tenga una @ y un punto. El patrón es muy completo pero mejorable por supuesto, está como aquel que dice, a prueba de bombas ;-D La función retorna la variable error con un true o false en el caso de que haye un error en la validación.

Despues de una cuantas modificaciones funciona a la pefección. Pero mi verdadera duda es ¿como hacer que los resultados de mi formulario me lleguen al mail? Que necesito...

Esta pagina es buenisima : Inserte este codigo en mi pagina y me dio ERROR, pero quisiera pedirles que me expliquen mejor como hacer para que funcione ! gracias !

Hola amigos, muy buena su página. La pregunta es: puedo enviar el formulario a mas de una direccion de email, o mejor dicho si puedo escojer a traves de unos botones al final del form a que email enviarla? gracias.

Tu formulario no valida cuando ingreso espacios en blanco,en la caja de texto de cadena

Tu formulario no valida cuando ingreso espacios en blanco