Para comenzar a utilizar jquery.validation, simplemente debemos agregar una referencia a las librerías jQuery y jquery.validation en nuestra página, en mi caso utilizare CDN para ambas librerías, aquí un primer ejemplo
El método .validate() valida los campos de y si todos los campos son correctos enviará el formulario pero en caso no queramos enviar el formulario sino solamente necesitamos saber si el formulario está validado entonces cambiaremos el método .validate() por .valid(), el cual nos devolverá true o false dependiendo de si el formulario está correcto o no, y lo comprobaremos con un evento .click().
Jquery Validate por defecto valida que los campos no estén vacíos (required), ¿pero si queremos validar un email o un máximo número de caracteres para un nombre?, pues para eso podemos usar el método rules de Jquery Validate, ¿y como? bueno simplemente agregando los métodos necesarios para ese campo o campos (que pueden ser required, email, max, min, range , etc…).
submitHandler: function(form) - invalidHandler: function(form)
La función submitHandler captura el evento action del formulario validado y define las acciones a seguir en caso el formulario sea valido y la función invalidHandler se activa cuando el formulario no pasa las validaciones y define las acciones a seguir, en caso quisiéramos utilizar AJAX para llamadas asincrónicas podemos utilizar como ejemplo el siguiente código
Cuando sucede un error durante la validación, por defecto jquery.validation agrega dinámicamente una etiqueta label a continuación del campo validado. Además, el mensaje de esta etiqueta es igualmente predefinido y está en inglés pero en la misma descarga del plugin hay una carpeta localization donde están todos los ficheros de idioma, si por ejemplo, queremos los mensajes en español bastaría con incluir la siguiente referencia a nuestra página, siempre después de la referencia a jquery.validation.
Personalizando los mensajes de error
Los mensajes de error se muestran por defecto a continuación del campo erróneo. Aparecen dentro de la etiqueta
errorContainer(): especifica un contenedor a usar para mostrar los mensajes.error.
LabelContainer(): contiene los errores en una lista desordenada, esta lista desordenada va dentro de un errorcontainer y para mostrarla se puede utilizar wrapper: "li".
errorElement(): permite definir el elemento html que contendrá el texto del mensaje a mostrar.
wrapper(): envuelve la etiqueta definida en errorElement dentro de la que especifiquemos.
Ejemplo de uso
Con ignore podemos especificar un selector jQuery para ignorar campos de nuestro formulario.
onsubmit, onfocus, onkeyup, onclick nos permiten decidir cuándo se realizará la validación.
Con errorClass y validClass podemos especificar el nombre de la clase CSS que se agregará al elemento validado en caso de fracaso o de éxito de la validación.
errorPlacement es una función que nos permite decidir donde situar los mensajes de error generados, errorPlacement vendría a ser el competidor de errorContainer.
higlight y unhiglight determinan como resaltar los elementos que no han superado la validación.
Aquí un ejemplo de uso de higlight y unhiglight
Aquí un ejemplo de uso de errorElement con ErrorContainer
Y el codigo javascript
Y el código javascript
');
} else if (type === "checkbox") {
// custom placement
error.insertAfter(element).wrap(' ');
} else {
error.insertAfter(element).wrap('
Puedes ejecutar el script anterior tal como esta pero si quiere ver un cambio en el color de los mensajes de error te dejo este cssFormulario de Registro
.label {
width:100px;
text-align:right;
float:left;
padding-right:10px;
font-weight:bold;
}
#register-form label.error {
color:#FB3A3A;
font-weight:bold;
}
h1 {
font-family: Helvetica;
font-weight: 100;
color:#333;
padding-bottom:20px;
}
El método .validate() valida los campos de y si todos los campos son correctos enviará el formulario pero en caso no queramos enviar el formulario sino solamente necesitamos saber si el formulario está validado entonces cambiaremos el método .validate() por .valid(), el cual nos devolverá true o false dependiendo de si el formulario está correcto o no, y lo comprobaremos con un evento .click().
$("#enviar").click(function(){
var validado = $("#formulario").valid();
if(validado){
alert('El formulario es correcto.');
}
});
Jquery Validate por defecto valida que los campos no estén vacíos (required), ¿pero si queremos validar un email o un máximo número de caracteres para un nombre?, pues para eso podemos usar el método rules de Jquery Validate, ¿y como? bueno simplemente agregando los métodos necesarios para ese campo o campos (que pueden ser required, email, max, min, range , etc…).
submitHandler: function(form) - invalidHandler: function(form)
La función submitHandler captura el evento action del formulario validado y define las acciones a seguir en caso el formulario sea valido y la función invalidHandler se activa cuando el formulario no pasa las validaciones y define las acciones a seguir, en caso quisiéramos utilizar AJAX para llamadas asincrónicas podemos utilizar como ejemplo el siguiente código
Mensajes de error
Cuando sucede un error durante la validación, por defecto jquery.validation agrega dinámicamente una etiqueta label a continuación del campo validado. Además, el mensaje de esta etiqueta es igualmente predefinido y está en inglés pero en la misma descarga del plugin hay una carpeta localization donde están todos los ficheros de idioma, si por ejemplo, queremos los mensajes en español bastaría con incluir la siguiente referencia a nuestra página, siempre después de la referencia a jquery.validation.
El contenido de este fichero es el siguiente:
/*
* Translated default messages for the jQuery validation plugin.
* Locale: ES
*/
jQuery.extend(jQuery.validator.messages, {
required: "Este campo es obligatorio.",
remote: "Por favor, rellena este campo.",
email: "Por favor, escribe una dirección de correo válida",
url: "Por favor, escribe una URL válida.",
date: "Por favor, escribe una fecha válida.",
dateISO: "Por favor, escribe una fecha (ISO) válida.",
number: "Por favor, escribe un número entero válido.",
digits: "Por favor, escribe sólo dígitos.",
creditcard: "Por favor, escribe un número de tarjeta válido.",
equalTo: "Por favor, escribe el mismo valor de nuevo.",
accept: "Por favor, escribe un valor con una extensión aceptada.",
maxlength: jQuery.validator.format("Por favor, no escribas más de {0} caracteres."),
minlength: jQuery.validator.format("Por favor, no escribas menos de {0} caracteres."),
rangelength: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1} caracteres."),
range: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1}."),
max: jQuery.validator.format("Por favor, escribe un valor menor o igual a {0}."),
min: jQuery.validator.format("Por favor, escribe un valor mayor o igual a {0}.")
});
Personalizando los mensajes de error
Los mensajes de error se muestran por defecto a continuación del campo erróneo. Aparecen dentro de la etiqueta
errorContainer(): especifica un contenedor a usar para mostrar los mensajes.error.
LabelContainer(): contiene los errores en una lista desordenada, esta lista desordenada va dentro de un errorcontainer y para mostrarla se puede utilizar wrapper: "li".
errorElement(): permite definir el elemento html que contendrá el texto del mensaje a mostrar.
wrapper(): envuelve la etiqueta definida en errorElement dentro de la que especifiquemos.
Ejemplo de uso
$('form').validate({
errorContainer: "#messageBox1",
errorLabelContainer: "#messageBox1 ul",
wrapper: "li"
});
Es equivalente a
Otros elementos a tomar en cuenta:
- Field is required
- Enter a valid email
Con ignore podemos especificar un selector jQuery para ignorar campos de nuestro formulario.
onsubmit, onfocus, onkeyup, onclick nos permiten decidir cuándo se realizará la validación.
Con errorClass y validClass podemos especificar el nombre de la clase CSS que se agregará al elemento validado en caso de fracaso o de éxito de la validación.
errorPlacement es una función que nos permite decidir donde situar los mensajes de error generados, errorPlacement vendría a ser el competidor de errorContainer.
higlight y unhiglight determinan como resaltar los elementos que no han superado la validación.
Aquí un ejemplo de uso de higlight y unhiglight
label.error{
color: Red;
}
input.highlight {
outline: none;
border-color: #ff0000;
box-shadow: 0 0 10px #800000;
}
Y el javascript
$('form').on('submit', false);
$('#btSubmit').click(function(){
$('#myForm').valid();
});
$('#myForm').validate({
rules: {
firstName: "required",
lastName: {
required: true,
atLeastXCharacters: {
fieldDescription: "Last Name",
minCharacters: 5
}
}
},
messages:{
firstName: {
required: "First name is required"
},
lastName: {
required: "Last name is required"
}
},
errorLabelContainer: '#listOfErrors',
wrapper: 'li',
highlight: function(element, errorClass, validClass){
$(element).addClass("highlight");
},
unhighlight: function(element, errorClass, validClass){
$(element).removeClass("highlight");
}
});
$.validator.addMethod("atLeastXCharacters", function(value, element, params){
return value.length > params.minCharacters;
}, function(params, element){
return $.format("{0} needs at least {1} characters", params.fieldDescription, params.minCharacters);
});
Aquí un ejemplo de uso de errorElement con ErrorContainer
$(document).ready(function() {
$("#commentForm").validate ( {
showErrors: function(errorMap, errorList) {
$("#warning").html("Tu formulario contiene " + this.numberOfInvalids() + " errores.");
this.defaultShowErrors();
},
debug: false,
errorElement: "em",
errorContainer: $("#warning"),
success: function(label) {
label.text("ok!").addClass("success");
}
});
});
Aquí un ejemplo de uso de errorElement con ErrorPlacement
Y el codigo javascript
$(function(){
$("#form").validate({
messages: {
name: "Please enter name.",
surname: "Please enter surname."
},
errorElement: "span",
errorPlacement: function(error, element) {
error.insertAfter(element);
}
});
});
Aquí un ejemplo de uso de errorElement con ErrorPlacement para varios tipos de input
Y el código javascript
errorElement: 'span',
errorPlacement: function (error, element) {
var type = $(element).attr("type");
if (type === "radio") {
// custom placement
error.insertAfter(element).wrap('');
}
},
Un ejemplo con errorContainer-ErrorlabelContainer y Wrapper
Y el cssMove Validation Warnings Please correct the following errors and try again:
body {
font-family: Georgia, "Times New Roman", Times, Serif;
padding: 1em;
background-color: #F2F2F2;
}
h2 {
border-bottom: 1px solid #DDD;
}
div {
background-color: #FFF;
border: 1px solid #A8A8A8;
padding: 0.5em;
margin-bottom: 1em;
}
input {
font-family: Georgia, "Times New Roman", Times, Serif;
}
label {
width: 10em;
float: left;
}
p {
clear: both;
}
#errorContainer {
display: none;
overflow: auto;
background-color: #FFDDDD;
border: 1px solid #FF2323;
padding-top: 0;
}
#errorContainer label {
float: none;
width: auto;
}
