#JavaScript validar formularios by @aulaclic

Fuente: aulaclic.es

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">// <![CDATA[
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">// <![CDATA[
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.

</pre>
<form action="enviar_mail.php" method="post" 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.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s