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.