Validar un formulario con jQuery

Si bien siempre es recomendable validar los formularios desde el servidor, hoy en día se utilizan mucho las validaciones desde el cliente usando Java Script. Uno de los motivos principales es para evitar hacer un request al servidor, esto viene muy bien para los sitios con mucha sobrecarga de usuarios.

En este artículo vamos a entender cómo validar un formulario con jQuery usando el plugin validationEngine version 2.6.1, como primer paso se pueden descargar este plugin desde el repositorio de validationEngine en GitHub. Ahí también podrán encontrar toda la documentación requerida.

Ahora vamos a validar un formulario con jQuery y validationEngine

Es importante mencionar que este plugin permite validar direcciones de correo, teléfonos, URL, contraseñas, números entre muchas otras opciones.

Ahora vamos a crear un formulario con algunos campos de textos requeridos y otros no, combos de selección, además un campo para validar una URL y contraseña.

	<form id="formID" class="formular" method="post">
		<fieldset>
			<legend>
				Requerido!
			</legend>
			<label>
				<span>Este campo es requerido: </span>
				<input value="" class="validate[required] text-input" type="text" name="req" id="req" />
			</label>
			<legend>
				Opcional
			</legend>
			<label>
				<span>Este campo es opcional : </span>
				<input value="" class="validate[custom[url]] text-input" type="text" name="optional" id="optional" />
			</label>
			<legend>
				Placeholder & required
			</legend>
			<label>
				<span>Deporte favorito 1:</span>
				<select name="sport" id="sport" class="validate[required]">
					<option value="">Seleccione un deporte</option>
					<option value="option1">Tennis</option>
					<option value="option2">Football</option>
					<option value="option3">Golf</option>
				</select>
			</label>
			<label>
				<span>Deporte favorito 2:</span>
				<select name="sport2" id="sport2" multiple class="validate[required]">
					<option value="">Seleccione un deporte</option>
					<option value="option1">Tennis</option>
					<option value="option2">Football</option>
					<option value="option3">Golf</option>
				</select>
			</label>
			<br/>
		</fieldset>
			
		<fieldset>
			<legend>
				Personalizado
			</legend>
			<label>
				<p>Viene con muchas expresiones regulares predifined (teléfono, URL, ip, email..etc)</p>
				<br/>
				<span>Ingresar URL : </span>
				<input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" />
				<br/>
			</label>
		</fieldset>
			
		<fieldset>
			<legend>
				Iguales
			</legend>
			<label>
				<span>Password : </span>
				<input value="karnius" class="validate[required] text-input" type="password" name="password" id="password" />
			</label>
			<label>
				<span>COnfirmar password : </span>
				<input value="kaniusBAD" class="validate[required,equals[password]] text-input" type="password" name="password2" id="password2" />
				<br/>
			</label>
		</fieldset>
		<input class="submit" type="submit" value="Validate &amp; Validar formulario"/><hr/>
	</form>

Para validar un campo simplemente hay que agregarle la clase validate, por ejemplo para indicar que un campo es obligatorio habría que agregarle la clase validate[required], y en caso de validar un email validate[required,custom[url]].

Para poder activar el plugin es necesario introducir el siguiente código de java script, el cual se va a ejecutar una vez cargada la página:

jQuery(document).ready(function() {
  // se une el envío de formularios y campos para el motor de validación
  jQuery("#formID").validationEngine();
});

Luego si intentamos enviar el formulario sin completar los campos el resultado sería el siguiente:

Espero que se haya entendido las interesantes funcionalidades que ofrece este plugin para jQuery. Ante cualquier problema no duden en consultar.