Friday, May 24, 2013

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.



Done!!


LinkWithin

Related Posts Plugin for WordPress, Blogger...