jQuery.validate.js

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

## download
[jQuery plugin: Validation](http://bassistance.de/jquery-plugins/jquery-plugin-validation/)

## sample1
簡単なサンプル

``` html: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>
```
何も入力していない場合は以下のようなエラーが表示される。

![sample1](http://s1-03.twitpicproxy.com/photos/full/565459658.png)

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

``` html: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>
```
文字数が５文字以下だと以下のようなエラーが表示される。
![sample2](http://s1-01.twitpicproxy.com/photos/full/565463024.png)

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

``` html: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>
```
エラーメッセージが日本語に!
![sample3](http://s1-02.twitpicproxy.com/photos/full/565464576.png)

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

↓エラー発生前
![sample4](http://s1-05.twitpicproxy.com/photos/full/565465734.png)

↓エラー発生後
![sample5](http://s1-02.twitpicproxy.com/photos/full/565466209.png)

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

``` css:style.css
label.error {
  color: red;
}
```

エラーメッセージが赤字に!
![sample6](http://s1-02.twitpicproxy.com/photos/full/565466799.png)

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

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

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

``` css:style.css
h1.myError {
  background-color: red;
}
```
![sample7](http://s1-04.twitpicproxy.com/photos/full/565467333.png)