Validacion de formularios con javascript

De ChuWiki
Revisión del 20:53 3 mar 2014 de Chudiang (Discusión | contribuciones) (Página creada con «__TOC__ Veamos un pequeño ejemplo de cómo validar un formulario HTML con javascript antes de enviarlo al servidor. Tienes el HTML y javascript completos en [https://gith...»)

(dif) ← Revisión anterior | Revisión actual (dif) | Revisión siguiente → (dif)
Saltar a: navegación, buscar

Veamos un pequeño ejemplo de cómo validar un formulario HTML con javascript antes de enviarlo al servidor. Tienes el HTML y javascript completos en form.html


El formulario

El formulario algo como esto

	<form id="theForm" method="post" action="form.html"
		onsubmit="return validate()">
		<label>Integer : </label><input type="text" name="aInteger"></input></br> 
		<label>Float : </label><input type="text" name="aFloat"></input></br>
		<label>10 characters : </label><input type="text" name="tenChars"></input> </br>
		<label>email : </label><input type="text" name="email"></input>
		<input type="submit" value="Send"></input>
	</form>

Hemos puesto un id al formulario idForm para poder acceder a él fácilmente desde javascript. Le hemos añadido también un onsubmit="" que llama a una función javascript validate() que será la encargada de validar los datos introducidos en el formulario. Es imporante que la función devuelva true si todo es correcto y false en caso contrario y es importante, en el onsubmit, poner un return de lo que devuelve esa función. Si onsubmit devuelve false, no se enviará el formulario.

onsubmit="return validate()"

Dentro del formulario, unos cuantos campos variados para validar. Uno que queremos que sea un entero, otro que queremos que sea un float, un texto que queremos que tenga al menos 10 caracteres y un email que queremos que tenga un formato correcto.


Función javascript

La función javascript puede ser algo como esto

var validate = function() {
   var form = document.getElementById("theForm");
   if (!form.aInteger.value || isNaN(parseInt(form.aInteger.value))) {
      return false;
   }
   if (!form.aFloat.value || isNaN(parseFloat(form.aFloat.value))) {
      return false;
   }
   if (form.tenChars.value.length < 10) {
      return false;
   }
   var emailRegex = /^\w+@\w+\.\w+$/;
   if (!form.email.value.match(emailRegex)) {
      return false;
   }
   return true;
}

Vamos a ver algunos detalles de ella.

Lo primero que se debe advertir es que la función devuelve false si alguno de los datos introducidos no es correcto y true en caso contrario. En caso de que no sea correcto, se podría mostrar un alert o marcar de alguna forma el campo que no es correcto, pero no nos vamos a meter ahora en eso.

Al principio de la función obtenemos el formulario. Para ello usamos document.getElementById("theForm") apovechando el id que pusimos al formulario. Una vez obtenido, con form.nombreCampo.value podemos acceder al valor introducido en cada uno de los campos.

Verificamos el entero. Para ello, primero se comprueba que se ha introducido algo, es la parte if (!form.aInteger.value). Si el campo está vacío, la condición !form.aFloat.value será true. La otra condición es que parseInt() devuelva un valor válido, es decir, uno que devuelva isNaN() a false.

Con el Float lo mismo, pero usando parseFloat().

Para la cadena de 10 caracteres, simplemente miramos que su longitud es mayor que 10.

Para el email usamos una expresión regular. Esta es muy sencillota y no vale para una aplicación en serio, pero no nos vamos a meter en una en serio puesto que sería muy compleja. La expresión regular que hemos elegido es que tenga 1 o más letras, una @, una o más letras, un punto y una o más letras, es decir valdrá cualquier xxxxxxx@yyyyyy.zzzzzzz con tal de que tenga al menos una x, una y y una z.

La forma de comprobar que el texto casa con esa expresión regular es usar la función match() del texto escrito en el formulario pasando como parámetro la expresión regular.

Si todos los if salen por el else, es que todos los campos son correctos, así que al final se devuelve true para indicar que todo va bien.