How to handle multilingual error messages for jQuery validation plugins

In How to customize error messages for jQuery validation plugin guides us customize error messages for jQuery validation plugin.
But nowadays, multilingual is a requirement for most of the application.
Thus on top of customized messages, we need to provide multilingual support for the error messages.

This article will show an easy way to provide multilingual support for jQuery validation plugin.

The trick is to keep our customized error messages in resource bundle.

Steps:
1.  write the customized error messages in our application's resource bundle. eg, messages.properties
e.g.

invalid_email=Invalid email format

2. use the resource key for the customized error message

 <script>
  $(document).ready(function(){
    $("#myform").validate({
  rules: {
      'myform:emailAddr': {
      required: true,
      email: true
    }
  },
  messages: {
      'myform:emailAddr': {
        email: "#{msgs.invalid_email}"
    }
  }
});
  });
  </script>

3. prepare the resource bundle in different languages, eg. messages_fr.properties, messages_zh.properties, etc.

4. when system locale changed, it will automatically retrieve the messages from appropriate resource bundle.

related jQuery validation articles:
  - Email
  - Credit card
  - Multiple form fields
  - Error message customization
  - Using jQuery Validation Plugin in JSF
  - jQuery Validation Plugin localization
  - Error handling in jQuery Validation Plugin

Done!!