Internacionalizando jquery.validate.js

¿Cómo están?…¡Espero que bien!

Bueno, esta será una entrada extrarápida. Primero que nada ¿qué es lo que se hace?.

Digamos tenemos un caso típico de validación de formularios vía ajax. Todos sabemos existen plug-ins muy interesantes para Javascript entre ellos jquery.form y jquery.validate. Sin embargo el problema por el que casi la mayoría de los desarrolladores hemos pasado una vez en la vida es cuando nos dicen:

¡Hey tu!…¿Sólo español (castellano) en la página de mí empresa?…¿Internet no me decías que era para expandir mercados?

Después de ello llegas al blog xyz y encuentras algo genial…hasta que ¡Oh rayos sólo soporta textos en inglés!. Y justamente ésto es lo que me acaba de ocurrir desde hace algo de tiempo:

  1. Manejo de formularios con AJAX
  2. Validación por AJAX
  3. Conseguir jquery.form y jquery.validate
  4. Batallar en que me cambie el lenguaje según lo prefiera el usuario (en mi caso inglés y español -castellano-)

Pues bien, si es por lo que estás pasando aquí te dejo la solución.
Primero es necesario buscar la parte en jquery.validate.js un código similar a éste:

messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
},

Aquí es donde configuramos por medio de un objeto los mensajes. Si bien, tenemos el poder de hacerlo dinámico (¿Javascript para que me sirves?). Entonces seguimos a hacer alto tan hereje o tan puro cómo deseen, es una función que lo haga simple. En mi caso sólo tengo de 2 sopas (inglés y español -castellano-) por lo que se me ocurrió hacer ésto:

function internacionalizar(lenguaje){
return lenguaje == "es" ? {
required: "Este campo es requerido",
remote: "Porfavor corrije el valor de este campoPlease fix this field.",
email: "Ingresa una dirección de correo válida.",
url: "Ingresa una URL válida.",
date: "Ingresa una fecha válida.",
dateISO: "Ingresa una fehca válida (ISO).",
number: "Ingresa un número válido.",
digits: "Ingresa sólo letras.",
creditcard: "Ingresa un número de tarjeta de crédito válido.",
equalTo: "Ingresa el nuevo valor de nuevo.",
accept: "Ingresa un valor con extensión válida.",
maxlength: $.validator.format("Porfavor ingresa menos de {0} caractéres."),
minlength: $.validator.format("Porfavor ingresa almenos {0} caractéres."),
rangelength: $.validator.format("Porfavor ingresa un valor entre {0} y {1} caractéres de longitud."),
range: $.validator.format("Ingresa un valor entre {0} y {1}."),
max: $.validator.format("Ingresa un valor menor o igual que {0}."),
min: $.validator.format("Ingresa un valor mayor o igual a {0}.")
} : {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
};
}

Luego procedemos a cambiar la propiedad de mensajes en jquery.validate.js de lo anterior (código más arriba) a esto:

messages: internacionalizar($.cookie("Language")),

Y listo, con esto nos hacemos nuestras librerías internacionalizadas.

Saludos, espero que les haya gustado y les sirva sobretodo.

Anuncios

9 comentarios en “Internacionalizando jquery.validate.js

    1. ummestesimon dijo:

      Debes contar con el framework jquery.validate…Ese archivo lo editas. Y dentro del framework viene algo cómo lo que muestro arriba, cambias las propiedades que tiene ese JSON por internacionalizar($.cookie(“Language”))…Por lo que debes contar también con jquery.cookies. Además debes almacenarla cómo “es” o “en”. Es cuestión de lógica 😉

      1. Dario dijo:

        Puedes ampliar mas lo de jquery.cookies y “almacenarla”. Hasta ahora busque el texto message: … y reemplace lo que mencionas de messages: internacionalizar… en el archivo jquery.validate. La funcion que escribes donde va? en el mismo archivo?
        Gracias

    1. ummestesimon dijo:

      Pues depende que usas. Si usas HTML 5 ya cuentas con un campo específico para números, cuentas de correo y otras cosas; quizás ni siquiera necesites pelearte con esto del Javascript. En este caso (el del post) se habla de validar formularios y de internacionalizar la validación ofrecida por jquery.validate. Sin embargo puedes encontrar información en Google, sin mucho problema llegué a con una solución que parece se adapta más a la tuya pero con números. Sin embargo, buscando un tantito más encontré algo que si se adapta a tu problemática completamente, pero, hay que saber expresiones regulares. No hay mucho problema. Lo único es bucarle un poco 🙂

      Un saludo.

  1. arrow135 dijo:

    Mi consejo es que no modifiqueis la classe jquery.validate.js para así en un futuro poder actualizarla sin problemas. Quedaría de la siguiente forma:

    $.extend($.validator, {
    messages: {
    required: “Este campo es requerido”,
    remote: “Porfavor, corrije el valor de este campo.”,
    email: “Ingresa una dirección de correo válida.”,
    url: “Ingresa una URL válida.”,
    date: “Ingresa una fecha válida.”,
    dateISO: “Ingresa una fehca válida (ISO).”,
    number: “Ingresa un número válido.”,
    digits: “Ingresa sólo letras.”,
    creditcard: “Ingresa un número de tarjeta de crédito válido.”,
    equalTo: “Ingresa el nuevo valor de nuevo.”,
    accept: “Ingresa un valor con extensión válida.”,
    maxlength: $.validator.format(“Porfavor ingresa menos de {0} caractéres.”),
    minlength: $.validator.format(“Porfavor ingresa almenos {0} caractéres.”),
    rangelength: $.validator.format(“Porfavor ingresa un valor entre {0} y {1} caractéres de longitud.”),
    range: $.validator.format(“Ingresa un valor entre {0} y {1}.”),
    max: $.validator.format(“Ingresa un valor menor o igual que {0}.”),
    min: $.validator.format(“Ingresa un valor mayor o igual a {0}.”)
    }
    });

    1. ummestesimon dijo:

      Yo la he modificado porqué era algo rápido, pero si, tienes mucha razón, puedes darle extensibilidad de otras maneras. Gracias por la visita.

  2. asd dijo:

    Eres una bestia, aprende a escribir….

    Te dejo la verisón en buen español:

    required: “Este campo es requerido”,
    remote: “Corregir el valor de este campo.”,
    email: “Ingrese una dirección de correo válida.”,
    url: “Ingrese una URL válida.”,
    date: “Ingrese una fecha válida.”,
    dateISO: “Ingrese una fecha válida (ISO).”,
    number: “Ingrese un número válido.”,
    digits: “Ingrese sólo letras.”,
    creditcard: “Ingrese un número de tarjeta de crédito válido.”,
    equalTo: “Ingrese nuevamente el valor.”,
    accept: “Ingrese una extensión válida.”,
    maxlength: $.validator.format(“Ingrese menos de {0} caracteres.”),
    minlength: $.validator.format(“Ingrese al menos {0} caracteres.”),
    rangelength: $.validator.format(“Ingrese un valor entre {0} y {1} caracteres.”),
    range: $.validator.format(“Ingrese un valor entre {0} y {1}.”),
    max: $.validator.format(“Ingrese un valor menor o igual que {0}.”),
    min: $.validator.format(“Ingrese un valor mayor o igual a {0}.”)

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s