フォームの入力項目をリアルタイムでチェックする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; }

サンプル


$('#id名').valid8(); //ノーマル
			


$('#id名').valid8('入力必須項目です');//独自メッセージ
			


$('#id名').valid8({
	'regularExpressions': [
	{ expression: /^[a-zA-Z0-9]+$/, errormessage: 'A-Zと数字のみが入力可能です'}
	]
});
			


function doesPasswordFieldsMatch(values){
    if(values.password == values.verification)
        return {valid:true}
    else
        return {valid:false, message:'パスワードが違うがな'}
}
$('#demo4_pass').valid8('Password is required');
$('#demo4_com').valid8({
    'jsFunctions': [
        { function: doesPasswordFieldsMatch, values: function(){
                return { password: $('#demo4_pass').val(), verification: $('#demo4_com').val() }
            }
        }
    ]
});
Javascriptサンプルページ一覧
skuare.net