フォームの入力内容をチェックするjQueryバリデーションプラグイン「JQuery Form Validation And Hints」

フォームに入力された内容を送信前にチェックするバリデーションの紹介です。
これにより、ユーザーの入力間違いを簡易的に防ぐことが可能です。
JQuery Form Validation And Hints

使用方法

JQuery Form Validation And Hintsからファイル一式をダウンロードします。

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.form-validation-and-hints.js"></script>
次に通常通りフォーム部分を記述したら、内容に応じてクラスを付与すれば完成です。

<form>
	<div class="field required"> //必須項目にはrequired
		<p><label>お名前</label><br />
			<input class="text verifyText" type="text" /> //テキストには varifyText
			　<span class="iferror">必須項目です</span></p> //エラー時のテキスト
	</div>
	<div class="field required">
		<p><label>電話番号</label><br />
		<input class="text verifyInteger" type="text" size="8" /> //数字には verifyInteger
		　<span class="iferror">数字を入力ください</span></p>
	</div>
	<div class="field required">
		<p><label>Email</label><br />
		<input class="text verifyMail" type="text" size="24" title="*mail@example.com" /> //メールにはverifyMail
		　<span class="iferror">Emailを入力ください</span></p>
	</div>
</form>
エラー部分のデザインは.iferrorに記述下さい。

.iferror {margin:0;display:none;} //初期時は消しておきます
.error .iferror {display:block;width:200px;background:red;color:#fff;padding:3px;} //エラー時に表示

サンプル


　必須項目です


　数字を入力ください


　Emailを入力ください


Javascriptサンプルページ一覧
skuare.net