jquery.validate.jsでrequired時のエラーメッセージを変更してみた

WBCはピーコと阿部のせいで準決勝は負けてしまいましたね。
結局阿部なんてオランダ戦でしか打ってないのに無能のピーコが4番にこだわり続けて、
あげくの果てに阿部の打席でダブルスチールという無能采配も良いところでしたね。

阿部もカットぐらいしろよと。キャプテンならあそこでヒットぐらい打てよと。
本当にこの2人のせいで負けてしまったと言っても過言では無いですね。
今回のWBCにはイチローや岩隈や松中や福留がいなかったという事ですね。。。。

と延々と書きたい事は山ほどありますのでここら辺でやめておきましょう。

今作っているサービスではクライアント側のエラーチェックにjquery.validate.jsを使っています。
jquery.validate.jsというのは有名なvalidate用プラグインでもうおなじみですね。
jQuery Validation Plugin | Form validation with jQuery

このプラグインは凄く便利なんだけどrequired時のエラーメッセージを変更したいなと思ったのでその方法を書いてみます。
今回使うjquery.validate.jsのバージョンは1.11.0となります。

まずはエラーメッセージの日本語化からしてみましょう。
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/localization/messages_ja.js
をダウンロードした後、このようにscript宣言してあげれば良いわけですね。

  
  
   ←jquery.validate.jsより先に読み込んじゃダメです。

じゃあ早速jquery.validateを使ってみましょう。
細かい使い方は色んなサイトが詳しく書いていますのでそちらを参考にしてもらうとして、
ここでは簡単に

<form id="login-form" aciton="/login" method="post">
  <input type="email" name="email">
</form>

というようなhtmlのformタグがあったとしましょう。次にチェックとして、、、

$(function() {
  $("#login-form").validate({
    rules: {
      'email': {
        required: true
      }
    }
  });
});

こんな感じで書いてみると、emailという項目に何も入力されていなければエラーメッセージとして

このフィールドは必須です。

というように表示されます。うーん、このままだと味気ないエラーメッセージですね。
もっと分かりやすく

「XXXを入力してください。」

というようにエラーメッセージを変えてみたくなりました。

という事で早速やってみましょう。
変更点は以下の通りです。
まず、messages_ja.jsの内容を以下のように修正してください。

	$.extend($.validator.messages, {
		// required: "このフィールドは必須です。",
		required: "{1}を入力してください。",

{0}としない理由は後ほど。その後、先ほどのエラーチェックを、

  $("#login-form").validate({
    rules: {
      'email': {
        required: [true, 'メールアドレス']
      }
    }
  });

てな感じに変更してください。

そうすると、エラーメッセージは

メールアドレスが入力されていません。

と表示されるようになりますたﾉｼ

messages_ja.jsに書いた{1}はrulesのパラメータに対応しているわけですね。
なぜこんな事が実現できるのかはjquery.validate.jsのソースを見てください。
もし{0}にすると

trueが入力されていません。

と表示されてしまうので、{1}を記述しているわけです。

この方法はあくまでも小手先のテクニックとして覚えておいてください。

本当に今日は無能のピーコと糞キャプテン阿部のせいで悔しくてムカついて眠れませぬ。。。