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

フォームに入力された内容を送信前にチェックするバリデーションの紹介です。
これにより、ユーザーの入力間違いを簡易的に防ぐことが可能です。
JQuery Form Validation And Hints
フォームの入力内容をチェックするjQueryバリデーションプラグイン「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;} //エラー時に表示

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

sponsors

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

記事作成:
記事URL:

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