Como desarrollador web y sistemas de gestión, validar formularios es un paso obligatorio y de cierta forma repetitivo.
En este artículo veremos cómo trabajar con jquery.validation como una potente herramienta para las validaciones de formularios.
Para comenzar a utilizar jquery.validation, simplemente debemos agregar una referencia a las librerías jQuery y jquery.validation en nuestra página.
[sourcecode language='php' padlinenumbers='true'] <script src="jquery-x-x/jquery-x.x.x.js" type="text/javascript"></script> <script src=" jquery-x-x /jquery.validate.js" type="text/javascript"></script> [/sourcecode]
Conceptos básicos
Si trabajamos con jquery.validation hay que tener claros que son los métodos de validación y las reglas de validación.
Los métodos de validación implementan el código necesario para validar un elemento.
De serie contamos con un número considerable de métodos de validación para las comprobaciones más habituales, pero siempre es posible agregar a jquery.validation nuestras propias validaciones personalizadas.
Por ejemplo, un método de validación sería el código necesario para validar que la entrada es numérica o un e-mail, y las reglas de validación permiten asociar un elemento de nuestro formulario a uno o más métodos de validación.
A continuación se muestran las distintas formas de cómo se pueden asociar a un elemento las reglas de validación:
1- A través de nombres de clases css en atributo class. Por ejemplo class=”required” especifica que nuestro elemento será requerido, si se desea asociar a más de una regla se hace seguido de un espacio: class=”required number”, especifica que será requirido y solo aceptará números. Estos nombres de clases no tienen por qué existir en tu hoja de estilos, son clases que utilizará sólo jquery.validation.
2- Con atributos personalizados que requieren parámetros. Por ejemplo <input type=”text” minlength=”3”>, especifica que el contenido de nuestra caja de texto no debería ser menor a 3 caracteres
3- A través de código javascript y añadiendo las reglas a través del objeto rules.
Un primer ejemplo
[sourcecode language='php' ]
<form method="post" id="ejForm">
<p>
Nombre
<input type="text" id="nombre" name="nombre" class="required" />
</p>
<p>
Edad
<input type="text" id="edad" name="edad" class="required digits" />
</p>
<p>
<input type="submit" value="Enviar" />
</p>
</form>
<script type="text/javascript">
$().ready(function () {
$("#ejForm").validate();
});
</script>
[/sourcecode]
Estas reglas no son excluyentes y pueden combinarse según nuestras necesidades.
En este formulario:
Se han especificado las reglas de validación a través de nombres de clases.
Se ha llamado al método validate() para el elemento ejForm, que configura el formulario para que sea validado.
A partir de este momento, el formulario no podrá ser enviado si no cumple con las reglas impuestas.
Si ampliamos el ejemplo anterior para que el nombre tenga al menos 3 caracteres y la edad esté comprendida entre 18 y 99 años, tendremos que especificar estas reglas de validación a través de atributos con parámetros:
[sourcecode language='php' ]
<form method="post" id=" ejForm ">
<p>
Nombre
<input type="text" id="nombre" name="nombre" class="required" minlength="3" />
</p>
<p>
Edad
<input type="text" id="edad" name="edad" class="required digits" min="18" max="99" />
</p>
<p>
<input type="submit" value="Enviar" />
</p>
</form>
[/sourcecode]
Otra forma de especificar las reglas es utilizar javascript para acceder al objeto rules y declararlas por código:
[sourcecode language='php' ]
<form method="post" id=" ejForm ">
<p>
Nombre
<input type="text" id="nombre" name="nombre" />
</p>
<p>
Edad
<input type="text" id="edad" name="edad" />
</p>
<p>
<input type="submit" value="Enviar" />
</p>
</form>
<script type="text/javascript">
$().ready(function () {
$("# ejForm ").validate({
rules: {
nombre: {
required: true,
minlength: 3
},
edad: {
required: true,
digits: true,
min: 18,
max: 99
}
}
});
});
</script>
[/sourcecode]
Mensajes de error
Algo importante cuando validamos, es cómo y dónde se muestran los 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.
Referente al nuevo elemento label creado, es posible especificar el tipo de elemento que queremos crear para mostrar un error, en qué lugar del documento queremos que aparezca, mostrar resúmenes de errores para agrupar los mensajes, etc.
Más adelante se mostraran unas breves indicaciones de cómo personalizar estos mensaje.
Algo muy importante es la traducción del mensaje y la forma más sencilla de traducir los mensajes es bajarse la traducción de los mismos al lenguaje que necesites. Por defecto, jquery.validation está traducido a más de 41 idiomas, pero si aun así tu idioma no está disponible te resultará bastante sencillo traducirlo.
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.
[sourcecode language='php' ] <script src=" jquery-x-x /messages_es.js" type="text/javascript"></script> [/sourcecode]
Una vez hemos traducido los mensajes predefinidos, podríamos querer mostrar mensajes personalizados o simplemente un mensaje especial para un campo concreto.
jquery.validation resuelve la búsqueda del mensaje a mostrar de la siguiente forma:
1- Primero busca si se ha especificado un mensaje para el elemento a través de javascript. Si lo encuentra, este será siempre el mensaje mostrado. Con javascript podemos especificar un único mensaje para todos los errores de validación o mostrar un mensaje por cada tipo de error de validación.
2- Segundo busca si nuestro elemento tiene definido el atributo title. Si lo encuentra, el valor del mismo será mostrado.
3- Por último, si no encuentra mensajes desde javascript ni el atributo title, buscará en los mensajes predefinidos.
Un ejemplo de personalización a través de javascript:
[sourcecode language='php' ]
$().ready(function () {
$("#ejForm").validate({
rules: {
nombre: {
required: true,
minlength: 3
},
edad: {
required: true,
digits: true,
min: 18,
max: 99
}
},
messages: {
nombre: {
required: "Nombre es obligatorio",
minlength: function (p, element) {
return "Nombre tiene que ser igual o mayor que " + p;
}
},
edad: "Este será el único mensaje para edad"
}
});
});
[/sourcecode]
Reglas y métodos de validación personalizados
Es posible también implementar nuestras propias reglas de validación si no nos sirven las incluidas en jquery.validation.
Por ejemplo, crearemos una regla que validará si el nombre suministrado cumple con ciertas condiciones.
La regla de validación se llamara valid_nombre y al método de validación le llamaremos esNombreValido. En la práctica, el método de validación suele llamarse igual que la regla de validación, pero en este ejemplo las he llamado distintas para que veas que no es necesario asociar una regla y su método por nombre.
1. Definir método de validación personalizado
[sourcecode language='php' ]
function esNombreValido (value, element, param) {
//value es el valor actual del elemento que se está validando
//element es el elemento DOM que se está validando
//param son los parámetros especificados por el método
// p. ej. en el caso de minlength="3", param será 3
// en caso de que el método no tenga parámetros, param será true
if (value == ‘Pedro”) {
return true; //supera la validación
}
else {
return false; //error de validación
}
}
[/sourcecode]
2. Registrar regla de validación, método de validación y mensaje por defecto
[sourcecode language='php' ]
$.validator.addMethod("valid_nombre ", esNombreValido, "No eres Pedro");
[/sourcecode]
3. Utilizar nueva regla de validación
[sourcecode language='php' ]
$().ready(function () {
$("#ejForm").validate({
rules: {
nombre: {
valid_nombre: true
}
}
});
});
[/sourcecode]
Remote
Remote es muy sencillo de entender. Simplemente se delega la validación del elemento en una llamada a una url que validará el valor en el servidor y tiene que devolver en formato JSON un true si la validación ha tenido éxito o false (o cualquier otro valor distinto de true) en caso contrario.
En codeIgniter podríamos agregar por ejemplo una función p llevar a cabo la tarea de validación en el servidor.
[sourcecode language='php' ]
function nombre_funcion_ajax() {
$nombre = $this->input->post(‘nombre’);
//se hace la comprobación de que el valor cumpla las condiciones deseadas
if ($this->nombre_model->value_exist($nombre)) {
echo 'false';
} else
echo 'true';
}
[/sourcecode]
Y el código javascript necesario para utilizarlo sería:
[sourcecode language='php' ]
$("# ejForm ").validate({
rules: {
nombre: {
required: true,
remote:{
url:"<?php echo base_url(); ?>mi_controlador/ nombre_funcion_ajax ",
type:"post",
data:{
nombre: function(){
return $('# nombre ').val();
}
}
}
}},
messages: {
nombre: {
required: “El valor es requerido”,
remote: "el valor no cumple con la condición x"
}
}
});
[/sourcecode]
Por defecto, remote hace una petición GET con los parámetros nombre=valor.
En cualquier caso, remote permite configurar todo lo que queremos la petición AJAX a través de su parámetro options.
En el ejemplo mostrado se envía por el método post y se adjunta como dato el nombre esto no es necesario ya que por defecto se envía el parámetro validado, pero se utiliza en caso de querer enviar algún otro dato junto con el validado.
Además de todas las funcionalidades mencionadas posee muchas más, todas estas configurables que nos permiten enriquecer el trabajo de los datos en el lado del cliente.
Espero les haya servido de ayuda.
Saludos
