skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

フォームの入力項目をリアルタイムでチェックするJavaScript「Valid8」

｜ ｜ ｜ ｜ ｜ ｜ ｜

最近お問い合わせフォームでリアルタイムに入力項目をチェックするサイトが増えてきているように感じます。
ユーザビリティを向上させられ、お問い合わせ数の増加に期待できそうです。
JavaScriptのライブラリ「jQuery」のプラグインValid8を使用すると簡単に導入できます。

使用方法
Valid8からjquery.valid8-1.2.2.jsをjQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.valid8-1.2.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#id名').valid8();
});
</script>

あとはいつものように記述したフォームにidを付与すれば完成です。
<input id="id名" />
そのほかにもエラー表示を変更したり、英数字のみ、パスワード確認なども可能です。
サンプルにてご確認ください。
また、エラー時やvalid時のCSSは以下の通りとなります。
.w.error { background-color: #EFD8D7; }
.w.error .input { border-color: #C8A5A5; background: #fff url('icon_error.png') no-repeat right center; }
.w.valid { background-color: #A4EFAE; }
.w.valid .input { border-color: #A5C8A6; background: #fff url('icon_valid.png') no-repeat right center; }
.w.valid span { display: none; }

フォームの入力項目をリアルタイムでチェックするJavaScript「Valid8」サンプル

記事作成：2009年08月19日

前の記事：twitterのタイムラインをさくっと表示するJavaScript
次の記事：印象的なメニューを作成するJavaScript「Kwicks for jQuery」