VALIDANDO ANDO Y YA NO ME VOY QUEJANDO (PARTE 4. JQUERY VALIDATION Y FINAL)

<script src=”my own” title=”parte 4 jquery validation”>

En el post anterior, se usó la librería Validate.js para validar nuestro formulario del primer post. Esta vez voy a usar la librería jQuery Validation, para ello necesitamos (obviamente) de jQuery, ya que esta librería se usa como una extensión de este framework.

Descargamos las librerías requeridas y las incluímos como normalmente se haría, primero jQuery y luego jQuery Validation:

<script src="jquery.min.js"></script>
<script src="jquery.validate.js"></script>
<script src="additional-methods.js"></script>
<script src="localization/messages_es.js"></script>

El archivo additional-methods.js contiene algunos métodos agregados por otras personas que desarrollaron diferentes implementaciones de esta librería, como por ejemplo el método digits y el método lettersonly.

El archivo messages_es.js contiene los mensajes localizados para el idioma español. Una vez incluídos, se escriben las reglas de validación respectivas para cada campo. Consulta los posts anteriores para ver los requerimientos de validación:

$(document).ready(function() {
	$.validator.addMethod("texto", function(value, element) {
		return /[a-z0-9\s]+/ig.test(value);
	}, $.validator.format("Caracteres especiales no son permitidos"));

	$('#formulario').validate({
		rules: {
			nombre: {required: true, lettersonly: true},
			apellido: {required: true, lettersonly: true},
			direccion: {required: true, texto: true},
			correo: {required: true, email: true},
			edad: {required: true, digits: true},
			sexo: "required",
			cine: {require_from_group: [1, ":checkbox"]},
			radio: {require_from_group: [1, ":checkbox"]},
			teatro: {require_from_group: [1, ":checkbox"]}
		}
	});
});

En el método texto se verifica que el valor en el campo contenga sólo letras, números y espacios, agregando un mensaje (en español) en caso de no ser válido. Por su parte, el método require_from_group verifica por medio de un selector de jQuery, que se seleccionen al menos uno de los campos marcados por el selector (¡dolor de cabeza resuelto 😀 !). Pueden ver más ejemplos de esta librería en la documentación de su página oficial. 😉

</script>

Anuncios