jquery.validate.jsのエラーメッセージを独自メッセージにする方法

jquery

こんにちわ!5月です。例年より少し肌寒い気がします。

HTMLフォームのバリデータプラグイン「jquery.validate.js」はエラーメッセージを指定しなくても、デフォルトのエラーメッセージが表示されます。

[スポンサーリンク]

しかし、デフォルトのエラーメッセージは全て英語なので、日本では少々使い勝手が悪いですよね。
「jquery.validate.js」のエラーメッセージは、自分で指定することが可能です。もちろん日本語のメッセージにすることも可能です。

この章でやること

「jquery.validate.js」のmessagesの使い方を紹介します。

messagesでエラーメッセージを指定する

<!doctype html>
<html>
<head>
<meta charset="utf-8" content="">
<title>jquery.validateのサンプル</title>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="./jquery.validate.min.js"></script>

<!-- スクリプト部分 -->
<script type="text/javascript">
$(document).ready(function() {
   $("#testForm").validate({
      rules : {
            id: {
                required: true,
                digits: true,
                minlength: 3,
                maxlength: 10
             },
             name: {
                required: true
             },
             date: {
                 date: true
             }
      },
      messages: {
         id: {
           required: "idは必須項目です。",
           digits: "idは数値形式で入力して下さい。",
           minlength: "idは3字以上で入力して下さい。",
           maxlength: "idは10字以下で入力して下さい。"
         },
         name: "nameは必須項目です。",
         date: "dateは日付形式で入力して下さい。"
       }
    });
});
</script>
</head>

<!-- HTML部分 -->
<body bgcolor="#e2e2e2">
    <form id="testForm" method="POST" action="./index.html">
      <label>id:</label><input type="text" name="id"/>
      <br/>
      <label>name:</label><input type="text" name="name"/>
      <br/>
      <label>date:</label><input type="text" name="date"/>
      <br/>
      <input type="submit" value="submit"/>
    </form>
</body>
</html>

解説

rulesの子要素(id,name,date)に対応させて、messagesにエラーメッセージを指定していきます。
上記のソースを例にしますと、
idのrules、「required」・「digits」・「minlength」・「maxlength」に対応するエラーメッセージを指定しています。
idの入力値が空だった場合は、「idは必須項目です。」と表示されます。

実行結果

こんな感じでエラーになります。
実際にデモを触って確認してみて下さい。
validate-js-message1

デモ

実際に動かすことが出来ます

さいごに

jquery.validate.jsのエラーメッセージの指定方法は、非常に分かりやすい印象があります。
常にrulesmessageがセットになっている。ようなイメージなので分かりやすいのかなと感じました。

今回はエラーメッセージを独自メッセージに変更しました。
エラーメッセージは変わりましたが、エラーメッセージが表示される場所は、デフォルトと同じです。
テキストボックスのすぐ横に表示されます。
jquery.validate.jsは、エラーメッセージを表示する場所も変更出来ます。こちらはまた次回紹介していきたいと思います。
それでは!