この記事の所要時間: 1756

シンプルに使う場合

基本サンプル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 で