21

I have a registration form implemented using jquery mobile. The user can choose to complete this form in either German, English or French - there are multiple internal pages used to display the form in each language .. The user selects their preferred language via a menu button.

I'm using the jquery validate plugin to handle client-side form validation. This works fine .. I'm wondering how to enable the right error messages for the form on each language page ? When you download the plugin from github it includes all the localization error code but I'm not sure how to enable it ..

Here's the JavaScript code I'm using to handle implementing the form validation for each language page ..

Thanks if you can help me to enable the right error messages for the German & French pages ..

$(document).on("pageshow", "#page_deutsch", function() {

$("#register_deutsch").validate();

});

$(document).on("pageshow", "#page_english", function() {

$("#register_english").validate();

});

$(document).on("pageshow", "#page_francais", function() {

$("#register_francais").validate();

});
Andrew Phillips
  • 664
  • 1
  • 4
  • 16

2 Answers2

32

jQuery validation plugin localization The default language for jQuery validation plugin is English. It could be overridden with the localization js file, eg. es, zh, fr, etc. Please refer here for the list of supported languages.

To enable languages support, we just need to add other language message js into our webpage (html/jsp/xhtml). for french

<script type="text/javascript" src="http://jzaefferer.github.io/jquery-validation/localization/messages_fr.js" />

for chinese

<script type="text/javascript" src="http://jzaefferer.github.io/jquery-validation/localization/messages_zh.js" />

Same for other languages, just find the appropriate language js and add the js into the webpage.

if the required language is not in the list, an workable alternative is to download a copy of the messages_xx.js into project workspace, then modify it to your required language.

Although the language js is provided, but the problem is in 1 webpage we can only use 1 type of language message. If multiple language message js in the webpage, the last will be used.

To resolve this problem, we can dynamically load the messages js by system locale.

<script type="text/javascript" src="http://jzaefferer.github.io/jquery-validation/localization/messages_<%= Locale.getDefault().getLanguage() %>.js" />

with the above solution, finally we can dynamically handle different language message by different system locale.

There is another way to handle multiple languages with resource bundle here.

related jQuery validation articles:

  • Email
  • Credit card
  • Multiple form fields
  • Error message customization
  • Using jQuery Validation Plugin in JSF
  • Multilingual error messages
  • Error handling in jQuery Validation Plugin

Done!!

Mattvic
  • 426
  • 8
  • 16
Егор Синицин
  • 437
  • 3
  • 4
  • 1
    This answer would be more helpful if the links mentioned by the word "here" were added. – Fernando Correia Feb 06 '14 at 20:09
  • 1
    Those links are broken =( – Mosh Feu Sep 22 '14 at 09:09
  • 7
    This is directly copied from http://www.kianworknotes.com/2013/05/jquery-validation-plugin-localization.html. Please refer to your source if you're going to copy text. – Patrick Oct 25 '14 at 10:33
  • 2
    This is stupid. The library should be able to switch the locale dynamically. Although this post is quite old in today's time where we got frameworks like Angular this is a must. –  Feb 24 '16 at 11:20
  • The only link working for me is the "here" link : https://github.com/jzaefferer/jquery-validation/tree/master/src/localization – jave.web Jan 27 '17 at 14:08
  • <%= Locale.getDefault().getLanguage() %> will not do alone. English is builtin, so you have to pull translation file only, if not on English page. – Jeffz Aug 17 '17 at 03:19
  • Maybe just use Jquery Validation's CDN on cdnjs.com: https://cdnjs.com/libraries/jquery-validate ;) – Francisco A. Cerda Aug 28 '23 at 05:18
4

The localization files are also available on jsdelivr and cloudflare CDNs:

for example

https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/localization/messages_de.js https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/localization/messages_fr.js https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/localization/messages_es.js

or

https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/localization/messages_de.js https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/localization/messages_fr.js https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/localization/messages_es.js

Rinda
  • 326
  • 2
  • 5