Validar un formulario mediante Javascript

Hoy os dejo un sencillo ejemplo de javascript (made by subires) para validar un formulario comprobando que los datos son correctos antes de enviarlos, reduciendo así el tiempo de carga en nuestro servidor al avisar a los usuarios de que algun campo está vació o erróneo antes de procesar el formulario.


Las comprobaciones que realiza son las siguientes:

•  Comprueba que los campos obligatorios no estén vacíos (nombre, dni y email)
•  Comprueba que el dni es CORRECTO (No vale solo con 8 números y una letra al azar)
•  Comprueba que el formato del e-mail es correcto.

El código del script es el siguiente:
function validar(){
 //RECOGEMOS LOS CAMPOS EN VARIABLES
var nombre = document.getElementById("nombre").value;
var dni = document.getElementById("dni").value;
var email = document.getElementById("email").value;
var telefono = document.getElementById("tfn").value;
var errorNombre = document.getElementById("erno");
 var errorDni = document.getElementById("erdn");
 var errorEmail = document.getElementById("erem");
 //LAS LETRAS SON PARA COMPROBAR EL DNI
var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N','J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T'];
 //COMPROBAR QUE LOS CAMPOS OBLIGATORIOS NO ESTAN VACIOS
if( nombre == null || nombre.length == 0 || /^\s+$/.test(nombre) ) {
errorNombre.innerHTML = "Debes introducir tu nombre";
 return false;
}else if( dni == null || dni.length == 0 || /^\s+$/.test(dni) ) {
errorNombre.innerHTML = "";
errorDni.innerHTML = "Debes introducir tu DNI";
 return false;
//COMPROBAR QUE EL DNI ES CORRECTO
}else if(dni.charAt(8).toUpperCase() != letras[(dni.substring(0, 8))%23]) {
errorDni.innerHTML = "El DNI no es correcto" ;
return false;
}else if( email == null || email.length == 0 || /^\s+$/.test(email) ) {
errorDni.innerHTML = "";
errorEmail.innerHTML = "Debes introducir tu E-mail";
 return false;
//COMPROBAR QUE EL FORMATO DEL E-MAIL ES CORRECTO
}else if(!(/[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/.test(email)) ){
errorDni.innerHTML = "";
errorEmail.innerHTML = "El E-mail no es correcto";
return false
}
return true;
}

CLICK AQUÍ para comprobar como funciona la validación

Hay que tener en cuenta los siguiente detalles para que el script anterior funcione correctamente:

1. El input de nombre debe de tener el id nombre
2. El input de dni debe de tener el id dni
3. El input de teléfono debe de tener el id tfn
4. Para escribir el mensaje de error, al lado de cada input debe de haber un div vacío con el id correspondiente.
5. Para el mensaje de error de nombre el id del div será erno
6. Para el mensaje de error de dni el id del div será erdn
7. Para el menaje de error de el id del div será erem
8. Y por último, dentro de la etiqueta <form > debe aparecer el atributo onsubmit con el valor return validar()

......

Artículos relacionados:

•  Crear un formulario de contacto para tu web