Blog >> Validacion simple de formularios con jQuery

Hoy en día existen numerosas librerías que nos facilitan la validación de formularios con JavaScript. Tanto que llega un momento que algo que era tan habitual hace unos años como programar tu propia validación JS ha caído en desuso.

En este post simplemente programaremos un sencillo ejemplo de validación de campos utilizando jQuery. En ocasiones utilizamos formularios tan simples que no es preciso recurrir a otras librerías para su validación. Este es un ejemplo de ello, disponiendo además de un desarrollo reutilizable y adaptable a otros formularios.

El formulario

Dispondremos de un formulario muy simple para realizar este ejemplo, con una estructura muy frecuente en cualquier página de contacto, con un par de campos <input>, un <select>, un checkbox, una selección por radiobutton un <textarea> para comentarios y un botón de envío.

Podrás consultar el código HTML y JS completo del formulario funcionando en el siguiente enlace:

Validación simple con jQuery

Empecemos pues por el HTML del formulario:

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<form name="contacto" id="contacto" method="post">
<label for="nombre">Nombre</label>
<input name="nombre" id="nombre" size="30"/>
<label for="apellidos">Apellidos</label>
<input name="apellidos" id="apellidos" size="30"/>
<label for="email">Email</label>
<input name="email" id="email" size="45"/>
<label for="edad">Edad</label>
<select name="edad" id="edad">
<option></option>
<option value="18-25">18 a 25 años</option>
<option value="26-45">26 a 45 años</option>
<option value="46-65">46 a 55 años</option>
<option value="66+">Más de 65</option>
</select>
<label for="comentario">Comentario</label>
<textarea name="comentario" id="comentario" cols="40" rows="4"></textarea> 
<label for="legal"><input type="checkbox" name="legal" id="legal" /> Estoy de acuerdo</label>
<label>¿Quiere recibir nuestro boletín? 
<input type="radio" name="boletin" value="si" />Si 
<input type="radio" name="boletin" value="no" />No
</label>
<button class="submit" disabled>Enviar</button>
</form>

Como podemos ver este formulario tiene una estructura muy simple, asignando a cada elemento del formulario un id con la misma cadena que el name. Una buena práctica que no deberás perder: asigna siempre que sea posible a cada elemento de un formulario un id para facilitar su localización por JS.

Otro de los aspectos a destacar es que el botón de submit se encuentra desactivado (disabled). El formulario no puede enviar la información hasta que nuestra validación compruebe que el formulario contiene los datos necesarios y mínimos para ser enviado.

El JavaScript

Para facilitar la tarea de selección de los elementos HTML del formulario y la detección de eventos para comprobar el estado de cada uno de los campos utilizaremos como base jQuery, cargando desde un CDN la librería.

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

A continuación incluiremos una serie de funciones que nos permitirán comprobar individualmente los datos que contienen cada uno de los campos del formulario, de modo que obtendremos como respuesta true cuando sea válido y false cuando no cumpla las condiciones necesarias. Para ello hemos definido varias funciones distintas para los cuatro tipos básicos de elementos de formulario para introducir datos: input, textarea, checkbox y radiobutton.

Validación de los inputs

Para la validación de los inputs acudimos a las expresiones regulares. De este modo utilizaremos una validación para Nombre y Apellidos y otra para el input de email. Como podemos ver declaramos varios patrones para cada tipo de campos. De este modo la función es más reutilizable pasándole como parámetros el id del campo a comprobar y la expresión regular a utilizar para la vaidación.

Para comprobar los campos input de Nombre y Apellidos nos valdremos del método .match() de JavaScript. En este ejemplo para validar ambos campos deberán de estar compuestos de una cadena de caracteres alfabéticos, con una longitud mínima de 4 caractéres y máxima de 30. Por supuesto admitiremos espacios. En caso de no cumplir esta condición devolverá un false.

En la validación del campo de email utilizamos un patrón mucho más complejo para asegurarnos que la cadena es una dirección de email.

var namePattern = "^[a-z A-Z]{4,30}$";
var emailPattern = "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$";
 
function checkInput(idInput, pattern) {
return $(idInput).val().match(pattern) ? true : false;
}

Comprobación de Textarea

En la función de comprobación de nuestro textarea somos menos rigurosos, aunque para validar este campo deberá de tener una extensión mínima de 13 caractéres.

function checkTextarea(idText) {
return $(idText).val().length > 12 ? true : false;	
}

Comprobación de Radiobuton y Checkboxes

El método de comprobación de jQuery para Radiobuton y Checkboxes es el mismo, así que aprovecharemos dicho método para comprobar los dos tipos. Obviamente comprobamos como condición que el check relativo a la aceptación de nuestras normas es aceptado; y que respondemos a la pregunta de si queremos suscribirnos al boletín o no.

function checkRadioBox(nameRadioBox) {
return $(nameRadioBox).is(":checked") ? true : false;
}

Por último comprobaremos que el campo select de Edad se encuentra cumplimentado también.

function checkSelect(idSelect) {
return $(idSelect).val() ? true : false;
}

Activación y desactivación del Submit

Por supuesto deberán de existir métodos o funciones que nos permitan activar el botón de Enviar si comprobamos que la validación es correcta; y también una función que desactive el botón si ha cambiado algo en el formulario y ya no cumple las condiciones de envío.

function enableSubmit (idForm) {
$(idForm + " button.submit").removeAttr("disabled");
}
 
function disableSubmit (idForm) {
$(idForm + " button.submit").attr("disabled", "disabled");
}

Validación del formulario

Por último nos encontramos con el controlador de la validación, que es quien comprueba el contenido del formulario ante los siguientes eventos: la modificación de un campo (change) o la pulsación de cualquier tecla (keydown). Si todas las condiciones que declaramos se cumplen el botón Enviar se activará y podremos enviar el formulario. En caso contrario es desactivado y no es posible enviarlo.

function checkForm (idForm) {
$(idForm + " *").on("change keydown", function() {
if (checkInput("#nombre", namePattern) && 
checkInput("#apellidos", namePattern) && 
checkInput("#email", emailPattern) && 
checkSelect("#edad") && 
checkTextarea("#comentario") && 
checkRadioBox("#legal") &&
checkRadioBox("[name=boletin]"))
{
enableSubmit(idForm);
} else {
disableSubmit(idForm);
}
});
}

Activación en el inicio del formulario

Por supuesto no podemos olvidarnos de activar la validación del formulario una vez cargado el documento, como cualquier plugin o desarrollo en jQuery. De este modo permanecerá «a la escucha» ante cualquier cambio en el formulario para su validación.

$(function() {
checkForm("#contacto");
});

Conclusión

Como hemos podido ver es muy sencilla realizar cualquier validación con jQuery dado que el uso de selectores simplifica mucho la tarea, así como determinar los eventos que lanzarán la validación. Lo más importante es determinar la validación de modo individual para cada tipo de formulario o cambio y poder tener un desarrollo lo más modular posible. En este caso creo que es un desarrollo bastante reaprovechable y espero os sirva para practicar y poder elaborar vuestros propios validadores.

Por supuesto no puedo dejar de recomendar precaución. Hoy en día es impensable no realizar un filtrado de datos también de los datos recibidos en el servidor. La validación JS puede ser fácilmente evitada siendo desactivado el motor JavaScript de nuestro navegador, no importa lo completa que sea.

A nivel personal me gustaría recomendar el uso de validadores jQuery realmente potentes como jQuery Form Validator, muy sencillo de configurar y personalizar e idóneo en escenarios más complejos. También incluyo al pie un enlace muy interesante sobre distintas Expresiones Regulares que nos permitiran perfeccionar las condiciones de validación de los campos <input>

Fuentes

Basic RegExp examples: http://www.sitepoint.com/jquery-basic-regex-selector-examples/
jQuery Form Validator: http://formvalidator.net/

Autor: Oscar Gascón Arjol
Última actualización: 12 de octubre de 2014