この記事の所要時間: 1750

このブログでかなりアクセスの高い記事がこれ・・・

どんなフォームにも使えるjQueryのフォームバリデーション exValidation 応用編

なんでアクセスされるのかな・・・サンプルあるからかな・・・って思ったら
本家の5509.meサイトがなくなっているからでしょうか。

そこで本来そちらのサイトにあった基本的な使い方も書いておいた方が良いかな・・・ということでサンプル作りました。

ホント、これのバリデーションは使いやすいです。

カスタマイズ性も抜群!分岐条件などがある場合は前の記事を御覧頂いた方がよろしいかと思います。

今回は基本ですので、初期設定をご覧ください。

exValidation 初期値

exValidationのソースから引用しました初期設定です。

/**
// 初期設定
errInsertPos : "body", // "body" or after(before)
err : null,
ok : null,
errFocus : false,
errHoverHide : false,
stepValidation : false,
scrollToErr : true,
scrollDuration : 500,
scrollAdjust : -10,
customScrollAdjust : false,
errPosition : "absolute", // fixed
errOpacity : undefined,
errTipPos : "right", // left
errTipCloseBtn : true,
errTipCloseLabel : "×",
errZIndex : 500,
errMsgPrefix : "* ",
customAddError : null, // function(){}
customClearError : null, // function(){}
customSubmit : null, // function(){}
customListener : "blur keyup change focus",
customBind : null,
*/

この中で、普通にカスタマイズしたいのは
errHoverHide = エラーメッセージにカーソルを乗せると消える
errTipCloseBtn = エラーメッセージに閉じるボタンを表示するか
errTipCloseLabel = 上記で表示する場合の閉じるボタンのテキスト「×」
errMsgPrefix = エラーメッセージの先頭文字 「入力してください」の「*」
errTipPos = エラーの表示位置 INPUT 等エレメントに対し左右を調整
scrollToErr = エラーのあった場所へスクロールするか「送信」ボタン押下時などで重宝します。

customListener = どの状態でエラー判定するか
「blue」:カーソルがそこから離れた時
「keyup」:1文字でも入力したらすぐ
「change」:変化があれば(selectやcheckbox,radioなど)
「focus」:カーソルを当てたらすぐ

この中のerrMsgPrefix以外はサンプルで調整しています。参考まで。
あとは好きにいじって調整してください。

基本・・・といっても実践的なシステム向け

基本サンプル1

JavaScriptがわかる方、とくにjQueryもなんとかという方はこちらで大丈夫かと思います。

JavaScript、cssの読み込みをお忘れなく!

<!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({ // それぞれの項目に「class="chkrequired chkkatakana"」のように記述しているのと同じことをしています。 rules: { name: "chkrequired", name_: "laterCall", kana: "chkrequired chkkatakana", kana_: "laterCall", email: "chkrequired chkemail chkhankaku chkgroup", email_: "laterCall", birthday: "chkrequired chkgroup", birthday_: "laterCall" }, customListener: "blur", // onBlur時のみにしてみる stepValidation: true, errTipCloseBtn: false, errTipPos: "left", // 吹き出しが表示される位置(左右) errHoverHide: true, // マウスオーバーで消える scrollToErr: true // }); // チェックボタンで確認する場合 $('input.laterCall').click(function() { validation.laterCall('#' + this.id.replace('_','')); }); }); // エラー削除 function clearErrors() { // 表示されているエラーをフェイドアウト $("div[id*=err_]").fadeOut(); } </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="" /> 
	<input type="button" id="name_" value="チェック" /></td> 
</tr> 
<tr> 
	<th>ふりがな<span>*</span></th> 
<td><input type="text" id="kana" name="kana" value="" /> 
	<input type="button" id="kana_" value="チェック" /></td> 
</tr> 
<tr> 
	<th>メールアドレス<span>*</span></th> 
<td><span id="email"><input type="text" id="email1" name="email" value="" /> @ <input type="text" name="email2" value="" /></span> 
	<input type="button" id="email_" value="チェック" /></td> 
</tr> 
<tr> 
	<th>生年月日<span>*</span></th> 
<td><span id="birthday"><input type="text" name="birthdayY" value="" /> 年 <input type="text" name="birthdayM" value="" /> 月 <input type="text" name="birthdayD" value="" /> 日</span><input type="button" id="birthday_" value="チェック" /> 
</td> 
</tr> 
</tbody> 
</table> 
</fieldset> 
<p class="submit"><input type="submit" value="送信するんです" class="button" /></p> 
</form> 
<p class="copy">Copyright &copy <a href="http://5509.me/">5509</a> Some Rights Reserved.<br />サンプルについては <a href="http://gti.jp/">gti.jp</a> フリーフードファイター さとう に著作権があります。</p> 
</body> 
</html>

ちょっと長いですね・・・
laterCall というのは「あとでこの項目を精査する」という感じの機能です。
初期設定の rule のところでこれを「(項目)_」という形式で laterCall 指定してあげれば
その下にある $(‘input.laterCall’).click(function() 〜 の部分がアンダースコアを除いて
項目を取得しチェックする・・・という仕様です。

その下の clearErrorsはエラーが自動的には消えないため一括削除するための関数です。
・・・が、今回使用していません。サンプルとして前回のものから削除していないだけです。

シンプルに使う場合

基本サンプル2

こちらは初期設定だけで動かしています。
初期設定ではエラー表示の際「×」を押さないと消えません。

初期設定は上に書いた通りですが、これでも十分です。

<!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 &copy <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 で6文字未満NG chkmax: “文字以内で入力してください”
// chkmax10 で10文字を超えるとNG chkradio: “選択してください”  // ラジオボタンの場合 chkcheckbox: “選択してください”
// チェックボックスの場合 chkurl: “正しいURLの形式を入力してください”
chktel: “正しい電話番号を入力してください”
chkfax: “正しいファックス番号を入力してください”
chkfile: “ファイルを選択してください”

今このくらいですが、どんどん増やせます。
すごい便利です。

上記サンプルのアーカイブをダウンロードしていただけます!

▽サンプルダウンロード!

※ご自由にお使いください。(著作権は放棄しませんが、中に名前もなく、使用に規制もありません。)

Facebookにて「いいね!」してくださっている方は他にもダウンロード出来るアーカイブが揃っています!
Facebookページ「株式会社ジーティーアイ」
ダウンロードコーナーはタブメニューの「ダウンロード」です。


ダウンロードページはこのブログのメニューに移動しました。
株式会社ジーティーアイ Facebookページに「いいね!」を押してくださるとダウンロードコンテンツを含むブログの重要更新がお知らせされます!是非「いいね!」してくださいね!

使用したご感想などコメントいただけるとありがたいです。


この記事が気に入ったら
いいね ! しよう

Twitter で