Jquery validaton localization error message

I’ve come across several website and forum when I tried to find out how to set up the localization for Jquery Validation. The common answer I get is include the messages file located in src/localization. For example, if I want to show the message in chinese, all I need to do is include the src/localization/messages_zh.js in the page.

 

That’s it! simple right? But there’s one issue with the method.

Yes, it shows the error message according to the language file you’ve included. If the language file is not in, you can always create your own. But when you dig a little more inside and you’ll notice you can’t actually customize the message for every single error for each input.

 

$(".selector").validate({
  rules: {
    name: "required",
    email: {
      required: true,
      email: true
    }
  },
  messages: {
    name: "Please specify your name",
    email: {
      required: "We need your email address to contact you",
      email: "Your email address must be in the format of [email protected]"
    }
  }
});

Let’s take the code above as a sample, without the localization, we can always have a specific message for every error.

(function($) {
	$.extend($.validator.messages, {
		required: "必须填写",
		remote: "请修正此栏位",
		email: "请输入有效的电子邮件",
		url: "请输入有效的网址",
		date: "请输入有效的日期",
		dateISO: "请输入有效的日期 (YYYY-MM-DD)",
		number: "请输入正确的数字",
		digits: "只可输入数字",
		creditcard: "请输入有效的信用卡号码",
		equalTo: "你的输入不相同",
		extension: "请输入有效的后缀",
		maxlength: $.validator.format("最多 {0} 个字"),
		minlength: $.validator.format("最少 {0} 个字"),
		rangelength: $.validator.format("请输入长度为 {0} 至 {1} 之間的字串"),
		range: $.validator.format("请输入 {0} 至 {1} 之间的数值"),
		max: $.validator.format("请输入不大于 {0} 的数值"),
		min: $.validator.format("请输入不小于 {0} 的数值")
	});
}(jQuery));

Whereas in the localization message you can only have a standard message for all input. The email: {required: “bla bla bla”} just won’t work.

 

How do I fix this?

It’s actually very simple.  Let’s create our first language js file: validatemsg_en.js . We’ll need to take out the section of message to the language file.

messages: {
    name: "Please specify your name",
    email: {
      required: "We need your email address to contact you",
      email: "Your email address must be in the format of [email protected]"
    }
  }

put it into the validatemsg_en.js file like this:

var validateFormMessage = {
    name: "Please specify your name",
    email: {
      required: "We need your email address to contact you",
      email: "Your email address must be in the format of [email protected]"
    }
  }

and change the message section into this:

$(".selector").validate({
  rules: {
    name: "required",
    email: {
      required: true,
      email: true
    }
  },
  messages: validateFormMessage 
});

Make sure you include the language file before the validate function otherwise it will produce an error. Now you can create as many different language file as you need and include it based on location.

 

And, we’re done!

 

Give us some support by sharing this article with your friend:

One thought on “Jquery validaton localization error message

  1. Hi !

    I’ve been trying to find the best solution for days to solve my problem.
    Your seems to be quite nice and customizable.
    Even if I follow your example and I create for instance one js file and one fr file, the plugin takes only one of them.
    Can’t understand why…
    Any idea ?

Leave a Reply

Your email address will not be published. Required fields are marked *