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

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

sponsors

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

記事作成:
記事URL:

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