Hace un par de días tuve que implementar para una aplicación de gestión web un par de componentes jQuery: jQuery Form Validator y el archiconocido Datepicker de jQueryUI. En su implementación nativa no cuentan con traducción al castellano, así la añadí al proyecto original. Ambas son muy fáciles de incluir.

jQuery Form Validator

Este componente basado en jQuery la verdad es que es bastante recomendable. Fácil de configurar y con multitud de opciones es de los más completos que conozco. Si os interesa el proyecto: http://formvalidator.net/.

Aunque se pueden configurar los mensajes de error para campo de formulario también permite personalizar los mensajes genéricos mediante notación JSON. Primero definimos las equivalencias:

var spanish = {
errorTitle: 'Fallo en el envío del formulario',
requiredFields: 'Introduzca datos',
badTime: 'No ha introducido una hora correcta',
badEmail: 'Dirección de correo no válida',
badTelephone: 'Número de teléfono no válido',
badSecurityAnswer: 'Respuesta incorrecta a la pregunta de seguridad',
badDate: 'No ha introducido una fecha correcta',
lengthBadStart: 'Debe introducir una cadena entre ',
lengthBadEnd: ' caracteres',
lengthTooLongStart: 'Debe introducir una cadena mayor de ',
lengthTooShortStart: 'Debe introducir una cadena menor de ',
notConfirmed: 'Los valores no pueden ser confirmados',
badDomain: 'Valor de dominio incorrecto',
badUrl: 'Esta no es una URL corrrecta',
badCustomVal: 'El valor introducido no es correcto',
badInt: 'No es un número válido',
badSecurityNumber: 'Your social security number was incorrect',
badUKVatAnswer: 'Incorrect UK VAT Number',
badStrength: 'La password no es lo suficientemente segura',
badNumberOfSelectedOptionsStart: 'Debe de elegir al menos ',
badNumberOfSelectedOptionsEnd: ' inputs',
badAlphaNumeric: 'El valor introducido debe de contener sólo caracteres alfanuméricos ',
badAlphaNumericExtra: ' y ',
wrongFileSize: 'El fichero es demasiado grande',
wrongFileType: 'El fichero es un tipo incorrecto',
groupCheckedRangeStart: 'Por favor elija entre ',
groupCheckedTooFewStart: 'Por favor elija al menos ',
groupCheckedTooManyStart: 'Por favor elija como mucho ',
groupCheckedEnd: ' elemento(s)'
};

Y a la hora de lanzar el trigger simplemente invocamos la variable que cargará el JSON y se aplicara nuestra configuración.

$.validate({language: spanish});

jQueryUI Datepicker

Mucha más conocida es la implementación de un calendario en un control de formulario que ofrece jQueryUI Datepicker (http://jqueryui.com/datepicker/). Si embargo en su configuración por defecto aparece en idioma inglés. Sin embargo que aparezcan los textos en castellano y que las semanas comiencen en lunes es muy sencillo.

También incluiremos en notación JSON la personalización del idioma y la apariencia:

$.datepicker.regional['es'] = {
closeText: 'Cerrar',
prevText: '<ant ',
nextText: 'Sig>',
currentText: 'Hoy',
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
weekHeader: 'Sm',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
</ant>

Y como en el anterior plugin en el trigger cargaremos el objeto con la configuración.

    $.datepicker.setDefaults($.datepicker.regional['es']);

Y eso es todo por hoy. 😉

Comparte si te ha gustado

Autor:
Última actualización:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.