Unidad 11. Avanzado: JavaScript. Validar formularios

Vamos a utilizar JavaScript para detectar los errores en el formulario de la página contacto.html antes de enviarlo, lo que permitirá a los usuarios corregirlos cómodamente.

Aunque validemos con JavaScript, siempre hay que validar también con PHP, ya que a un usuario con un mínimo conocimiento de HTML y JavaScript no le resultará difícil quitar las validaciones de la página, o simplemente, puede tener el JavaScript desactivado.

Validar con una función

En la propia página, ya que la función solo se utilizará en esta página, creamos una función, a la que le pasamos el formulario.

Lo que hará la función, es evaluar uno a uno los campos. Si encuentra un error, mostrará un mensaje, pondrá el foco (el punto de inserción) en el control, y devolverá falso. Si no hay errores, continúa con el siguiente campo. Al final, si no se ha producido ningún error, debe de devolver true.

Como le pasamos como parámetro el formulario, podemos acceder a los valores de so control con la estructura formulario.nombre.value:

<script type="text/javascript">
function validarForm(formulario) {
  if(formulario.nombre.value.length==0) { //¿Tiene 0 caracteres?
    formulario.nombre.focus();    // Damos el foco al control
    alert('No has escrito tu nombre'); //Mostramos el mensaje
    return false; //devolvemos el foco
  }
  return true; //Si ha llegado hasta aquí, es que todo es correcto
}
</script>

Utilizamos el método .length, que devuelve la longitud de una cadena, para comprobar si el número de caracteres es 0. Si es 0, la cadena está vacía.

Repetimos esto para el resto de comprobaciones, dejando el return true; al final del todo, para que sólo llegue ahí si todos los campos están correctos:

<script type="text/javascript">
function validarForm(formulario) {
  if(formulario.nombre.value.length==0) { //comprueba que no esté vacío
    formulario.nombre.focus();   
    alert('No has escrito tu nombre'); 
    return false; //devolvemos el foco
  }
  if(formulario.email1.value.length==0) { //comprueba que no esté vacío
    formulario.email1.focus();
    alert('No has escrito tu e-Mail');
    return false;
  }
  if(formulario.email1.value!=formulario.email2.value) {
    formulario.email1.focus();            //comprueba que sean iguales
	alert('Los e-Mails no coinciden');
    return false;
  }
  if(formulario.consulta.value.length==0) {  //comprueba que no esté vacío
    formulario.consulta.focus();
    alert('No has escrito ninguna consulta');
    return false;
  }
  return true;
}
</script>

Ahora tenemos que llamar a la función. Lo haremos, cuando se vaya a enviar el formulario, es decir, en el evento onsubmit del form.

<form method="post" action="enviar_mail.php" onsubmit="return validarForm(this);">

Observa que como parámetro hemos enviado this. Se trata de una palabra reservada que equivale al objeto que ha producido el evento, en este caso el formulario. Además, antes de la función hemos puesto return. Lo hemos hecho, porque si en un evento ponemos return false;, el evento se anula, en cambio si ponemos return true; continúa. Por eso es importante que la función devuelva false cuando queramos que no se envíe el formulario, y que devuelva true cuando queramos que se envíe.