Una Web+Libre: Validación de formularios con JavaScript

Hace unas semanas comenzamos con el tema de expresiones regulares específicamente aplicadas a la validación de correo electrónico, el día de hoy vamos a ampliaremos el tema de validación de formularios.

El ejemplo con el que trabajaremos contiene tres campos: nombre, edad y correo electrónico, estos son los campos por validar, además incluiremos un botón imput tipo submit y uno tipo reset:

Lo primero es mostrar el código del formulario:

<!DOCTYPE html>
<html>
<head>
<title>Mi página</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link type="text/css" rel="stylesheet" href="estilos/estilo2.css" media="all">
<script src="js/functions.js" type="text/javascript"></script>
</head>
<body>
<form action="save.php" method="post" onsubmit="return validar();">
      <span>nombre</span><br/>
      <input type="text" id="name" name="name"></input>
      <span id="error_name" class="error"></span> <br/>
      <span>edad</span><br/>
      <input type="text" id="age" name="age"></input>
      <span id="error_age" class="error"></span><br/>
      <span>e-mail</span><br/>
      <input type="text" id="mail" name="mail"></input>
    <span id="error_mail" class="error"></span><br/><br/>
      <input type="submit"></input><br/>
      <input type="reset" id="reset" name="reset"></input>
   </form>
</body>
</html>

En este código destacan tres etiquetas "span" sin contenido:
<span id="error_name" class="error"> </span>
<span id="error_age" class="error"> </span>
<span id="error_mail" class="error"> </span>

La razón por la que no tienen contenido es porque se les asignará un texto de forma dinámica a través de JavaScript. Estas etiquetas deben estar ocultas al cargar la pagina, y esto lo conseguiremos mediante css:

.error
{
 color:red; 
 display:none;
}

Aquí utilizamos el class "error" al que pertenecen estas etiquetas para ocultarlas y colorearlas de rojo.

Ahora veamos el código Javascript:

function validar() {
  
  /* SE OBTIENEN LOS ELEMENTOS NOMBRE, EDAD Y MAIL */
  fname = document.getElementById('name');
  age = document.getElementById('age');
  mail = document.getElementById('mail');

  /* SELECCIONA LAS ETIQUETAS DE ERROR Y LAS OCULTA */
  sp_fname = document.getElementById('error_'+fname.id );
  sp_fname.setAttribute('style','display: none');

  sp_age = document.getElementById('error_'+age.id);
  sp_age.setAttribute('style','display: none');

  sp_mail = document.getElementById('error_'+mail.id);
  sp_mail.setAttribute('style','display: none');

  continuar = true; /*envio activado por defecto*/

  /*SE EVALUAN LAS EXPRESIONES*/
  /* 1- QUE El CAMPO NOMBRE NO ESTE VACIO*/
  if (fname.value.length <= 0) {
    sp_fname.innerHTML = "Por favor digite un nombre válido";
    sp_fname.setAttribute('style','display:inline');
    continuar = false; /*se desactiva el envio y se muestra el mensaje de error*/
  }
  /*2- QUE EL CAMPO EDAD NO ESTE VACIO Y CONTENGA SOLO NUMEROS*/
  if (age.value.length <= 0  || isNaN(age.value)) {
    sp_age.innerHTML = "Por favor digite una edad válida";
    sp_age.setAttribute('style','display:inline');
    continuar = false; /*se desactiva el envio y se muestra el mensaje de error*/
  }
  /*3- SE VALIDA LA EXPRESION REGULAR PARA E-MAIL*/
  if (/^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$/.test(mail.value)){
        /*no hacer nada*/
  }
  else{
 sp_mail.innerHTML = "Por favor digite un e-mail válido";
 sp_mail.setAttribute('style','display:inline');
 continuar = false; /*se desactiva el envio y se muestra el mensaje de error*/
 }
  
  /*CUALQUIERA DE LAS EVALUACIONES ANTERIORES PUEDE ANULAR EL ENVIO*/
  return continuar;
}

En cada "if" se evalúa uno de los campos, y si la expresión no pasa la evaluación, entonces se escribe el error, se muestra la etiqueta junto al campo correspondiente:

sp_fname.innerHTML = "Por favor digite un nombre válido";
sp_fname.setAttribute('style','display:inline');

Y por último, se marca en false la variable continuar, esto detendrá el envío del formulario:

continuar = false;

Este código es muy sencillo y se pueden validar la cantidad de campos que se quiera y fue creado con la intención de aprender a dominar JavaScript.
Actualmente existen métodos mas sencillos para lograr esta validación basados en jQuiery y derivados.

Descargar archivos de este ejemplo:validacion-de-formularios.rar.
ver este ejeplo online.

Si te ha gustado esta entrada, comenta es gratis!!! o Suscríbete a nuestro blog.

lunes, 30 de julio de 2012

Validación de formularios con JavaScript

No hay comentarios:

Publicar un comentario

Seguidores