Inicio | Centro de ayuda | Categorías | Programadores | ¿Cómo validar una forma con Javascript?

¿Cómo validar una forma con Javascript?

Dificultad: Fácil

La validación de formularios es una herramienta en la programación de los sitios web que permite a los usuarios notificarle si se ha cometido algún error después de capturar sus datos, así como también evitar envío de SPAM en los casos en que el formulario se haya hecho con el fin de contactar a través de un mensaje de correo electrónico (Fig. 1).

 Fig. 1

Javascript puede ser utilizado para realizar estas validaciones.

A continuación se muestra un código en Javascript de la función que incorporará la validación a un formulario:  

 

function validar_forma() {
  if (document.getElementById){
    var i,p,q,nm,test,num,min,max,errors='',args=validar_forma.arguments;
    for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
      if (val) { nm=val.nombre; if ((val=val.value)!="") {
        if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');

          if (p

        } else if (test!='R') { num = parseFloat(val);
          if (isNaN(val)) errors+='- '+nm+' debe contener un nmero.\n';
          if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
            min=test.substring(8,p); max=test.substring(p+1);

            if (num

      } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' se requiere.\n'; }
    } if (errors) alert('Existen errores:\n'+errors);
    document.returnValue = (errors == '');
} }
 
 
Este fragmento de código (función) deber ser introducido por el programador dentro de la etiqueta "<head> </head>".
 
Ahora bien, para nuestro código del formulario, mandaremos llamar a ésta función para que se haga la validación al introducir datos. Como se muestra a continuación:
 
<form name="contacto" method="post" action="enviar.php" > 
<table> 
<tr> 
<td>Nombre: </td> 
<td><input id="nombre" name="nombre" size="30" type="text"/></td>
</tr>
<tr> 
<td> E-mail:</td>
<td><input id="email" name="email" size="40" type="text"/></td>
</tr>
<tr>
<td> Mensaje:</td>
<td><textarea name="mensaje" cols="40" row="10" id="mensaje" </td>
</tr>
<tr>
<td colspan="2" align="right"><input type="button" value="send message" onclick="validar_forma()"/></td>
</tr>
</table>
</form>
 
Vemos que el botón "Enviar" está llamando con un onclick a nuestra función para validar onclick="validar_forma()" en lugar de ser un botón con un submit cualquiera. 
 
De ésta manera nuestra forma contará con las validaciones necesarias para evitar que se envíen datos en blanco e incluso evitar el SPAM.
Estamos para servirte