Validación de formularios con el plugin JQuery Validator
Índice de contenidos
Introducción
En el mundo de desarrollo de aplicaciones Web, independientemente de las tecnologías de servidor utilizadas J2EE (Java), PHP, .Net, etc.,
la libería JQuery así como sus múltiples Plugins JQuery están siendo
cada día más utilizados en la parte cliente (el navegador de Internet de tu pc o dispositivo móvil).
Si mi aplicación o portal web tiene como requisito tener activado JavaScript para funcionar, aprovechémoslo y usemos los recursos (CPU, memoria) de las máquinas cliente y descargemos a los servidores,
disminuyamos el tráfico de red entre cliente y servidor en la medida de lo posible y hagamos tener una experiencia más positiva de navegación y usabilidad al usuario.
Desde su nacimiento, JavaScript fué principalmente pensado para hacer validaciones de datos en la parte cliente (que eso no excluye que también haya que hacerlo en la parte servidor), así como ejecutar funciones y tratamientos gráfica en la parte cliente.
En este tutorial, explicaremos como usar la librería JQuery y el plugin de validación JQuery Plugin mediante un ejemplo que veremos a continuación.
Requisitos previos
Se requieren conocimientos previos de JQuery, DOM y JavaScript.
Características principales de JQuery Validator
- Configuración flexible y fácil.
- Aproximadamente 20 reglas de validación preconstruidas (requerido, email, números, fechas, etc.) y posibilidad de crear nuevas reglas reutilizables.
- Mensajes de error de validación muy personalizables.
- Especificación de las reglas de validación de forma no intrusiva (no hace falta modificar el html) o modificando mediante clases css (ejemplo class=»required date»)
Ejemplo de instalación y uso de JQuery Validator
A continuación vamos a configurar JQuery Validator para validar el siguiente formulario de una forma no intrusiva aplicando las siguientes reglas:
- login: Requerido, además no debe existir un usuario con ese mismo login. (Ej: cgarcia está ocupado)
- Contraseña: Requerido, además deben tener al menos 4 caracteres y coincidir la conraseña con su verificación.
- Nombre completo: Requerido.
- E-Mail: Requerido, y debe tener un formato de email válido.
- Página web Opcional pero si existe el formato debe ser correcto.
- Fecha de nacimiento: Opcional pero si existe se validará que es una fecha correcta.
- Nº años de antigüedad: Requerido y número positivo entre 1 y 50.
- Nº personas a su cargo: Requerido, número entre 0 y 1000.
- Secreto: Requerido, es una regla personalizada que valida que el usuario introduzca la respuesta correcta.
- CampoX: Es opcional a menos que se haga click en el enlace que establece una regla dinámica sobre el, convirtiéndolo en un campo requerido.
Haz clic aquí para ver e interactuar con el ejemplo.
Debes descargarte las librerías JQuery y JQuery Validator e incluirlas en las páginas Web las librerías
Cuando ya esté cargado el DOM activamos haciendo uso de JavaScript la función de validación sobre el formulario.
En el código fuente Javascript anterior podemos observar:
- Mediante la propiedad rules especificamos las reglas de validación que tienen que cumplir cada campo referenciándolo por su «id».
- Mediante la propiedad messages especificamos los mensajes que deseamos mostrar al usuario cuando el campo no cumpla la regla de validación.
Si no se especifican se mostrarán los mensajes de error de por defecto. - Mediante las propiedades errorContainer, errorLabelContainer, wrapper, errorElement especificamos dónde y cómo queremos formatear los mensales de error.
Son opcionales y en caso de no especificarse, los errores se muestran en rojo al lado del campo con errores de validación. - El campo cuya etiqueta es «Secreto: ¿5+5?» tiene una regla de validación personalizada que valida que el contenido sea igual a un valor concreto.
Para crear la regla se ha usado el código fuente:
$.validator.methods.basicoCaptcha = function(value, element, param) {return value == param;};
Código fuente de la implementación de la funcionalidad en la parte servidora que valida la regla remote y valida que el login no esté ya siendo usado por otro usuario.
En PHP:
<?php
$isLoginAvailable = "true";
if (strcasecmp($_GET['login'], "cgarcia") == 0) {
$isLoginAvailable = "false";
}
header('Content-type: application/json');
echo $isLoginAvailable;
?>
En Java (un servlet mapeado sobre la url check-login.php)
package es.carlosgarcia;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/check-login.php")
public class CheckLogin extends HttpServlet {
private static final long serialVersionUID = -9220125965466401589L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String login = request.getParameter("login");
boolean available = ! "cgarcia".equalsIgnoreCase(login);
response.setStatus(HttpServletResponse.SC_OK);
response.setContentType("application/json");
response.getWriter().print(available);
}
}
Otros métodos de especificar las reglas de validación
JQuery Validator plugin permite incluir las reglas de validación directamente en el HTML, mediante propiedades personalizadas y clases css, por ejemplo:
Conclusiones
Gracias a JQuery Validator, podemos validar nuestros formularios web de una forma cómoda, fexible, rápida y no intrusiva.
Un saludo.
Carlos García.
Hola Carlos, una excelente leccion de JQuery… Yo lo uso bastante… pero tengo una duda, seguro podràs ayudarme… Estoy validando un form con JQuery, pero esta vez necesito hacerlo usando el atributo ID de todos mis elementos en vez de usar el atributo NAME… pero visto que soy novato en esto, no he encontrado una solucion clara en Internet… Te agradezco de antemano, saludos y muchos exitos 😉
buenas noches,
en primer lugar felicitarte por lo completo de tu explicación. Estoy tratando de implementar el plugin en un nuevo proyecto y me hace correctamente la validación, sin embargo no se ejecuta el formulario cuando están los campos debidamente cumplimentados. Mi pregunta es: ¿dónde debo incluir el action del formulario? pues en el parámetro del propio formulario no parece funcionar.
Estoy haciendo algo tal que así:
$(‘.validar.’).on(‘submit’, function (e){
e.preventDefault();
}).validate({
debug: false,
rules…
messages,…
})
Sin embargo, como digo, no se ejecuta el formulario.