viernes, 12 de julio de 2013

Cmo traducir y personalizar los mensajes del plugin jQuery Validation

Te paso un archivo de traduccin de los mensajes predeterminados del plugin jQuery
Validation, adems en la segunda parte de este post, te mostrar como personalizar
mensajes en lugar de usar los textos generales.
Puedes descargar el archivo de traduccin (internacionalizacin) desde aqu. El ejemplo
es en espaol mexicano.

1. El archivo
?
1 (function($) {
$(document).ready(function(e) {
2
if ($.fn.validate) {
3
jQuery.extend(jQuery.validator.messages, {
4
required: "Este campo es obligatorio.",
remote: "Revisar este campo.",
5
email: "La direccin de correo no es vlida.",
6
url: "La URL no es vlida.",
7
date: "La fecha no es vlida.",
8
dateISO: "La fecha no es vlida, debe tener formato
9 ISO.",
number: "El nmero no es vlido.",
1
digits: "Solamente se deben ingresar nmeros.",
0
creditcard: "El nmero de tarjeta no es vlido.",
11
equalTo: "El valor no coincide.",
1
maxlength: $.validator.format("Mximo {0}
2 caracteres."),
minlength: $.validator.format("Mnimo {0}
1
caracteres."),
3
rangelength: $.validator.format("Debe tener entre
1 {0} y {1} caracteres."),
4
range: $.validator.format("Debe tener un valor entre
1 {0} y {1}."),
max: $.validator.format("Debe tener un valor menor o
5
igual a {0}."),
1
min: $.validator.format("Debe tener un valor mayor o
6 igual a {0}.")
1
});
}
7
});
1
})(jQuery);
8
1
9
2
0
2
1
2
2

2
3
2
4

2. La implementacin
Invocas los archivos .js, algo parecido a esto:
?

<script src="js/jquery.min.js" type="text/javascript" charset="UTF18"></script>

<script src="js/jquery.validate.min.js" type="text/javascript"
2charset="UTF-8"></script>
3<script src="js/validation.es_MX.js" type="text/javascript"
charset="UTF-8"></script>

Implementas el plugin jQuery Validate

?
1 <script type="text/javascript" charset="utf-8">
jQuery(document).ready(function() {
2
3
$('#form_muestras').validate({
4
rules: {
5
txt_campo01: {
required: true
6
}
7
, txt_campo02: {
8
required: true,
9
email: true
1
}
}
0
, messages: {
11
txt_campo02: {
1
email: "El correo electrnico debe ser igual al
2 nombre de usuario."
}
1
}
3
, invalidHandler: function(form, validator) {
1
var errors = validator.numberOfInvalids();
4
if (errors) {
1
var message = errors == 1
? 'Hay un error en el formulario.
5
Verifique
los
datos
ingresados'
1
: 'Hay ' + errors + ' errores. Verifique
6 los datos ingresados';
1
$("#div-success").html(message).hide();
7
$("#div-error").html(message).show();
}
else
{
1
$("#div-success").hide();
8
$("#div-error").hide();
1
}
9
2
$('html, body').animate({scrollTop : 0}, 'slow');
}
0
});
2

1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
});
2 </script>
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
Eso es todo, espero que les haya sido de utilidad
Publicado por Ultiminio Ramos Galn