Validacion de formularios con javascript

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

El formulario

El formulario puede ser 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></br>
		<select name="aSelect">
			<option value="Select one">Select one</option>
			<option value="A">A</option>
			<option value="B">B</option>
		</select></br>
		<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 importante que la función devuelva true si todo es correcto y false en caso contrario y es importante a su vez, 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, un email que queremos que tenga un formato correcto y un combo del que queremos obligar a elegir alguna opción.

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;
   }
   if (form.aSelect.value=="Select one"){
      return false;
   }
   return true;
}

Vamos a ver algunos detalles de ella.

Lo realmente importante es que la función devuelve false si alguno de los datos introducidos no es correcto y true en caso contrario. El cómo implementes esa función es lo de menos y puedes hacerlo como más te guste. Por ejemplo, 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. Se podrían poner validaciones más complejas. Lo que se explica a continuación es sólo nuestro ejemplo concreto con unas validaciones rápidas para que sirvan de ejemplo, pero que pueden no ser las mejores ni las que te valgan en tu problema concreto.

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 haga que la función de javascript isNaN() devuelva false.

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

Para la cadena de 10 caracteres, simplemente miramos que su longitud es mayor que 10, usando el atributo length que tienen los string de javascript.

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 (el \w+), 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. No admite números ni otras caracteres que no sean letras. El ^ al principio y el $ al final corresponden con un inicio de cadena y un final de cadena, de esta forma no se podrá meter nada (por ejemplo espacios) delante o detrás del email.

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.

En cuanto al select, simplemente comprobar que el valor seleccionado no es el valor por defecto.

Si ninguno de los if se cumple, es que todos los campos son correctos, así que se llegará al final de la función y se devuelve true para indicar que todo va bien.