Validar un formulario con jQuery

Hoy te voy a contar sobre un plugin que nos permite validar un formulario con jQuery de forma muy sencilla. Con reglas de validación y mensajes de error totalmente personalizables.

Estamos hablando del jQuery Validation plugin, que trae muchas opciones configuradas por defecto, incluída la validación de email y URLs.

Te voy a mostrar como validar distintos campos de un formulario, como funcionan las reglas de validación, y también te dejo el ejemplo para descargar completo al final del post.

Comencemos

En primer lugar, tenemos que armar el formulario en HTML. Yo voy a hacer uno muy sencillo, con dos campos de texto input, un campo textarea y un botón para enviar. Es el de la imagen que puedes ver mas arriba.

<form id="mi-formulario" action="" method="post">
    <p>
      	<label for="nombre">Nombre <span>(obligatorio, al menos 3 caracteres)</span></label>
      	<input id="nombre" name="nombre" minlength="3" type="text" required>
    </p>
    <p>
      	<label for="email">E-Mail <span>(obligatorio)</span></label>
      	<input id="email" type="email" name="email" required>
    </p>
	<p>
		<label for="comentario">Comentario (obligatorio)</label>
		<textarea id="comentario" name="comentario" required></textarea>
	</p>
    <p>
    	<button type="submit">Enviar</button>
    </p>
</form>

Este complemento se puede comenzar a usar sin hacer ningún cambio significativo al código. Lo más importante, para que funcione, es agregar un identificador (id) al formulario que vamos a validar, para poder hacer referencia en la llamada. En el caso del ejemplo es: id=»mi-formulario»

Ahora tenemos que incluir los archivos necesarios para la validación. En este caso lo voy a hacer mediante una llamada al servidor CDN. Pero también se puede usar localmente, apuntando a la ruta de tu servidor donde hayas descargado los archivos.

<!--Incluir la librería jQuery-->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

<!--Incluir el plugin jQuery Validate-->
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.js"></script>

Una vez que hemos agregado estos dos archivos, podemos comenzar a validar cualquier formulario mediante el método validate como te mostraré a continuación.

A validar el formulario

Para comenzar a validar un formulario con jQuery usando este complemento, simplemente hay que agregar el siguiente código JavaScript en la página web:

$(document).ready(function() {
  $("#mi-formulario").validate();
});

Fijate que en la llamada estoy haciendo referencia al elemento «mi-formulario» que se corresponde al con el id que definí previamente, cuando arme el formulario en HTML.

Con esa línea de código, el complemento ya esta funcionando. Pero va a trabajar con los parámetros que trae por defecto, y los mensajes de error se muestran en ingles. Así que vamos a agregarle algunas líneas mas, para poder personalizarlo un poco.

Reglas de validación y mensajes de error

Dentro del método .validate() vamos a determinar cuales serán las reglas que debe cumplir cada campo para validar un formulario con jQuery de forma correcta. Cada regla se define con el nombre del campo y entre llaves se agregan las propiedades que deben cumplir.

En el ejemplo siguiente, voy a indicar que el campo «nombre» debe ser obligatorio y tener una longitud mínima de 3 caracteres. En el caso del email, además de ser obligatorio se controla que sea una dirección de correo válida (que contenga un @ por ejemplo).

$().ready(function() {
			// validate the comment form when it is submitted
			$("#mi-formulario").validate({
				rules: {
					nombre: {
						required: true,
						minlength: 3
					},
					email: {
						required: true,
						email: true
					},
					comentario: {
						required: true,
						minlength: 5
					}
				},
				messages: {
					nombre: {
						required: "Debes completar tu Nombre",
						minlength: "Tu nombre debe tener al menos 3 caracteres"
					},
					comentario: {
						required: "El campo comentarios es obligatorio",
						minlength: "El campo comentario debe tener al menos 5 caracteres"
					},
					email: "Debes ingresar un email valido"
				}

			});
		});

Para personalizar los mensajes de error, tenemos que definir el parámetro «messages«. Al igual que en las reglas de validación, aquí se hace referencia a cada campo por su nombre y entre las llaves se completa el texto que se mostrará si el campo no cumple con las condiciones de las «reglas».

Te dejo el ejemplo completo para descargar, para que puedas hacer todas las pruebas con las diferentes reglas de validación de formularios. La documentación completa esta disponible en la web del plugin.

Es muy importante recordar que esto no reemplaza la validación que debes realizar del lado del servidor. Siempre es posible que un usuario malintencionado omita las reglas de validación (usando las herramientas de desarrollador del navegador, por ejemplo) para manipular los datos y tratar de inyectar código a tu base de datos a través del formulario. Por lo tanto, siempre hay que validar los datos recibidos antes de procesarlos.