jQueryでフォームの入力をチェックするプラグイン

download

jQuery plugin: Validation

sample1

簡単なサンプル

sample1.html

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Validate</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript">
$(document).ready(function() {
    $("#myform").validate();
});
    </script>
  </head>
  <body>
    <form id="myform" method="POST" action="./index.html">
      <input type="text" class="required" name="comment"/>
      <input type="submit" />
    </form>
  </body>
</html>

何も入力していない場合は以下のようなエラーが表示される。

sample2

入力チェックの内容を指定する。

sample2.html

<!DOCTYPE html>
<html>
  <head>
    <title>title</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript">
$(document).ready(function() {
    $("#myform").validate({
        rules : {
            comment: {
                required: true,
                minlength: 5
            }
        }
    });
});
    </script>
  </head>
  <body>
    <form id="myform" method="POST" action="./index.html">
      <input type="text" name="comment"/>
      <input type="submit" />
    </form>
  </body>
</html>

文字数が５文字以下だと以下のようなエラーが表示される。

sample3

エラーメッセージを日本語にする。

sample3.html

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Validate</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript">
$(document).ready(function() {
  $("#myform").validate({
    rules : {
      comment: {
        required: true,
        minlength: 5
      }
    },
    messages: {
      comment: {
        required: "コメントが未入力です",
        minlength: $.format("{0}文字以上入力してください")
      }
    }
  });
});
    </script>
  </head>
  <body>
    <form id="myform" method="POST" action="./index.html">
      <input type="text" class="required" name="comment"/>
      <input type="submit" />
    </form>
  </body>
</html>

エラーメッセージが日本語に!

sample4

エラーメッセージのスタイルを変更する。
エラーが発生するとclass属性に「error」が追加される。

↓エラー発生前

↓エラー発生後

以下のようなスタイルを適用すると

style.css

label.error {
  color: red;
}

エラーメッセージが赤字に!

sample5

エラーメッセージの要素を変更する。
errClassとerrorElement属性値を使ってカスタマイズ可能。

script.js

$("#myform").validate({
  rules : {
    comment: {
      required: true,
      minlength: 5
    }
  },
  messages: {
    comment: {
      required: "コメントが未入力です",
      minlength: $.format("{0}文字以上入力してください")
    }
  },
  errorClass: "myError",
  errorElement: "h1"
});

スタイルも自由に設定できる。

style.css

h1.myError {
  background-color: red;
}