domingo, 31 de agosto de 2014

Tutorial Javascript parte 26 - Validar formularios




En este capítulo veremos como validar los campos de los formularios del lado del cliente con javascript, ejemplos como hacer que los campos sean requeridos, limitar el número mínimo y máximo de caracteres permitidos e incluir expresiones regulares a través del método match().

Código de ejemplo del capítulo ...


<!DOCTYPE HTML>
<html>
<head>

<script>
var validar = function()
  {
    var nombre = document.formulario.nombre;
 if (nombre.value == "")
   {
    document.getElementById("e_nombre").innerHTML = "El campo nombre es requerido";
    return;
   }
  else if (nombre.value.length < 3 || nombre.value.length > 25)
  {
    document.getElementById("e_nombre").innerHTML = "El campo nombre debe contener entre 3 y 25 caracteres";
    return;
  }
  else if (!nombre.value.match(/^[a-z]+$/i))
  {
    document.getElementById("e_nombre").innerHTML = "El campo nombre sólo acepta letras a-zA-Z";
    return;
  }
  else
  {
    document.getElementById("e_nombre").innerHTML = "";
  }
  
  var email = document.formulario.email;
  
  if (email.value == "")
   {
    document.getElementById("e_email").innerHTML = "El campo email es requerido";
    return;
   }
   else if (email.value.length < 6 || email.value.length > 80)
   {
    document.getElementById("e_email").innerHTML = "El campo email debe contener entre 6 y 80 caracteres";
    return;
   }
   else if (!email.value.match(/^[a-zA-Z0-9\._-]+@[a-zA-Z0-9-]{2,}[.][a-zA-Z]{2,4}$/))
   {
    document.getElementById("e_email").innerHTML = "El formato de email no es correcto";
    return;
   }
   else
   {
    document.getElementById("e_email").innerHTML = "";
   }
   
   var password = document.formulario.password;
   if (password.value == "")
   {
    document.getElementById("e_password").innerHTML = "El password es requerido";
    return;
   }
   else if (password.value.length < 8 || password.value.length > 16)
   {
    document.getElementById("e_password").innerHTML = "El password debe contener entre 8 y 16 caracteres";
    return;
   }
   else if (!password.value.match(/^([a-z]+[0-9]+)|([0-9]+[a-z]+)/i))
   {
    document.getElementById("e_password").innerHTML = "El password debe contener letras y números";
    return;
   }
   else 
   {
    document.getElementById("e_password").innerHTML = "";
   }
  
  var repetir_password = document.formulario.repetir_password;
  if (repetir_password.value == "")
  {
    document.getElementById("e_repetir_password").innerHTML = "El campo repetir password es requerido";
    return;
  }
  else if(repetir_password.value != password.value)
  {
    document.getElementById("e_repetir_password").innerHTML = "El campo repetir password no coincide con password";
    return;
  }
  else
  {
   document.formulario.submit();
  }
  
   }

window.onload = function()
  {
var btn = document.getElementById("btn");
btn.onclick = function()
     {
   validar();
  }
  }
</script>

</head>
<body>

<h1>Validar formulario</h1>
<form method="post" name="formulario">
Nombre: <input type="text" name="nombre" placeholder="Introduce tu nombre"> <span id="e_nombre"></span><br>
Email: <input type="email" name="email" placeholder="Introduce tu email"> <span id="e_email"></span><br>
Password: <input type="password" name="password"> <span id="e_password"></span><br>
Repetir password: <input type="password" name="repetir_password"> <span id="e_repetir_password"></span><br>
<button type="button" id="btn">Enviar</button>
</form>
</body>
</html>