ASP.NET MVC with jQuery Validation - messages customization and localization - asp.net-mvc

Question

I have ASP.NET MVC (4) project which localization is supported by the framework. Should I change browser settings to another language, framework automatically picks up the right resource file.
However, because I am using knockoutjs I fall back to jQuery validation at those views. Unfortunately there's no automatic support for localization there.
My question is - what are the best practices and ways to customize and localize jQuery validation messages so they will be picked automatically together with all MVC resources?
Something that jQuery validation messages will behave in a similar manner to Data Annotations messages given resources and message Ids.
In particular -
How to I make jQuery pick up the message I want from the resources instead of its default "This field is required", so it will print something like "Please enter email" and
How can I make jQuery print the same customized message in another language automatically should I change browser language ?
Thank you in advance.

Answer 1

1) How to I make jQuery pick up the message I want from the resources instead of its default "This field is required", so it will print something like "Please enter email".
The following is called to over-ride messages at any time. The strings below can be replaced with variables.
jQuery.extend(jQuery.validator.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: jQuery.validator.format("Please enter no more than {0} characters."),
minlength: jQuery.validator.format("Please enter at least {0} characters."),
rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
range: jQuery.validator.format("Please enter a value between {0} and {1}."),
max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
});
Otherwise, you can get more specific when declaring your rules within .validate().
$(document).ready(function () {
$('#myform').validate({ // initialize the plugin
rules: {
field1: {
required: true,
minlength: 5
}
},
messages: {
field1: {
required: "custom message for field 1 required",
minlength: "custom message: {0} chars required"
}
}
});
});
DEMO: http://jsfiddle.net/XV3ZR/
To dynamically change any messages after the plugin is first initialized, requires an over-ride by using the rules('add') method.
$('#field1').rules('add', {
messages: {
required: "field 1 required",
minlength: "{0} chars required"
}
});
DEMO 2: http://jsfiddle.net/PJGgE/1/
2) How can I make jQuery print the same customized message in another language automatically should I change browser language ?
I'm not sure what you mean by "change browser language", but again, the methods in #1 above are the only ways, AFAIK. These are just strings and you'll have to translate them manually or via outside methods.

Answer 2

I think that you can give on the server to the client script file with localization depending client's browser settings (something like i18n)