シンプルに使う場合
こちらは初期設定だけで動かしています。
初期設定ではエラー表示の際「×」を押さないと消えません。
初期設定は上に書いた通りですが、これでも十分です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>exValidationサンプル</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/exvalidation.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/exvalidation.js"></script>
<script type="text/javascript" src="js/exchecker-ja.js"></script>
<script type="text/javascript"> $(function(){ var validation = $("#inquiry-form").exValidation(); }); </script>
</head>
<body>
<p class="note"><a href="http://5509.me/log/exvalidation">Archive</a> | <a href="http://5509.me/">5509</a></p>
<h1>exValidation</h1>
<form id="inquiry-form" method="get">
<fieldset>
<p class="attention">*は必須項目です</p>
<table>
<tbody>
<tr>
<th>お名前<span>*</span></th>
<td><input type="text" id="name" name="name" value="" class="chkrequired" /></td>
</tr>
<tr>
<th>ふりがな<span>*</span></th>
<td><input type="text" id="kana" name="kana" value="" class="chkrequired chkkatakana" /></td>
</tr>
<tr>
<th>メールアドレス<span>*</span></th>
<td><span id="email" class="chkrequired chkemail chkhankaku chkgroup"><input type="text" id="email1" name="email" value="" /> @ <input type="text" name="email2" value="" /></span></td>
</tr>
<tr>
<th>生年月日<span>*</span></th>
<td><span id="birthday" class="chkrequired chkgroup"><input type="text" name="birthdayY" value="" /> 年 <input type="text" name="birthdayM" value="" /> 月 <input type="text" name="birthdayD" value="" /> 日</span>
</td>
</tr>
</tbody>
</table>
</fieldset>
<p class="submit"><input type="submit" value="送信するんです" class="button" /></p>
</form>
<p class="copy">Copyright © <a href="http://5509.me/">5509</a> Some Rights Reserved.<br />サンプルについては <a href="http://gti.jp/">gti.jp</a> フリーフードファイター さとう に著作権があります。</p>
</body>
</html>こちらのサンプルでは JavaScript によって ruleとして設定するのではなく
エレメント（inputタグ）に直接 class=〜 でバリデーション内容を記述しています。
こちらのほうが直感的でわかりやすいと思います。
ここからチャレンジしてみてください。
エラーの文字列の調整は
exchecker-ja.js を書き換えて行います。
こちらのファイルにバリデーションのスクリプトもありますので
追加や仕様変更なども出来ます。
chkrequired: “入力してください”
chkselect: “選択してください”
chkretype:”入力内容が異なります”
chkemail: “正しいメールアドレスの形式を入力してください”
chkhankaku: “全角文字は使用できません”
chkzenkaku:”全角文字で入力してください”
chkhiragana: “ひらがなで入力してください”
chkkatakana:”カタカナで入力してください”
chkfurigana: “ふりがなはひらがな、全角数字と〜、ー、（）が利用できます”
chknochar: “英数字で入力してください”
chknocaps: “英数字(小文字のみ)で入力してください”
chknumonly: “半角数字のみで入力してください”
chkmin: “文字以上で入力してください”
// chkmin6 で６文字未満NG chkmax: “文字以内で入力してください”
// chkmax10 で１０文字を超えるとNG chkradio: “選択してください” // ラジオボタンの場合 chkcheckbox: “選択してください”
// チェックボックスの場合 chkurl: “正しいURLの形式を入力してください”
chktel: “正しい電話番号を入力してください”
chkfax: “正しいファックス番号を入力してください”
chkfile: “ファイルを選択してください”
今このくらいですが、どんどん増やせます。
すごい便利です。
上記サンプルのアーカイブをダウンロードしていただけます！
※ご自由にお使いください。（著作権は放棄しませんが、中に名前もなく、使用に規制もありません。）
Facebookにて「いいね！」してくださっている方は他にもダウンロード出来るアーカイブが揃っています！
Facebookページ「株式会社ジーティーアイ」へ
ダウンロードコーナーはタブメニューの「ダウンロード」です。
↓
ダウンロードページはこのブログのメニューに移動しました。
※株式会社ジーティーアイ Facebookページに「いいね！」を押してくださるとダウンロードコンテンツを含むブログの重要更新がお知らせされます！是非「いいね！」してくださいね！
使用したご感想などコメントいただけるとありがたいです。
本家がなくなったのでこちらの記事は大変助かってます。ありがとうございます。
オプション説明の【「blue」：カーソルがそこから離れた時】ですが
「blue」ではなく「blur」の間違いではないでしょうか。
よろしくお願いします。
そうかも！ありがとうございまーす
jqueryのバージョンが1.10.1移行だとfirefox,ieで、scrollToErrがきいていないようです。
クロームでは動いています。
たかしさん
情報ありがとうございます！！
作者さんのサイトへ要望して実現されなかったバグのですが、
errTipPos : “right”, // left
上記をleftにするとバグがあります。
（画面が進んでしまう or 表示が消えてしまう）
こちらを修正することは可能でしょうか？
Rightのままだと正常に表示されるのですが・・・
よろしくおねがいいたします
こちらのサンプルを使いましたが、バグ？で動かなかったんです。。
試にセレクトタグを入れて動くか確認してもらえないでしょうか。。
<select name=”a”>
<option value=”a”>n</option>
</select>
つんつんさん
コメントありがとうございます。
セレクトタグのサンプルは確かに無かったですね。
タグは記載してある通りそのまま入れたということでしょうか？
選択していなければダメということで良いんですよね？
時間を見てやってみまーす。
つんつんさん
お待たせしました。
SELECT タグ入れてみました
サンプル２
記事中のサンプル２の方です。
要は
<select name=”sei” id=”sei” class=”chkrequired”><option value=””>–</option><option value=”男性”>男性</option><option value=”女性”>女性</option></select>
という感じで 属性に id と チェック仕様class（この場合はrequiredで必須指定）を指定してください。
idの指定はエラーメッセージが表示されるかどうか関連があります。
※応用編にはいきなりSELECTタグが出ていましたのでこちらも参考にどうぞ
どんなフォームにも使えるjQueryのフォームバリデーション exValidation 応用編