入力した値をチェックするJavaScript

リアルタイムに入力した値をチェック｜Live Validation

以前に「JavaScriptでユーザーに親切なフォーム入力」というタイトルで、フォーム入力時に空欄や形式のチェックを行うスクリプトを紹介しましたが、web creators 2008年5月号の「WEBデザイン即効テクニック76」に載っていたスクリプトもなかなか便利なので紹介してみます。

スクリプトは、｢Live Validation｣からダウンロードでき、このスクリプトを使うと、リアルタイムに入力した値をチェックしてくれるようになります。
ただし、難点というかなんというか…。
例えばメールアドレスなんかだと、
xxx@xxx.xx …打ち込んで、メールアドレスの形式だと確認できるまで、ＯＫだと判断してくれません。
なので、Webに対するリテラシーが高くない人達をターゲットにする場合は、利用しない方が良いかもしれないです。
ただ機能的には、必須・数字・メールアドレス・文字数…などをチェックしてくれるので、使い勝手は結構良さそうです。

では、サンプルです。

↑このサンプルはこちらからダウンロードできます。

理屈さえ判れば設定はそんなに難しくありません。サイトは英語で書いてありますが、examplesやdocumentationを見ると何となく判かると思います。簡単に説明すると…、

｢Live Validation｣のダウンロードページから、スクリプトをコピーしてjsファイルにします。（今回はFully documented の standalone version を使用しました）
まずは、そのjsファイルをヘッダに読み込みます。

フォームのinputにそれぞれのidを記述し、実行するスクリプトをフォームより後に記述します。
（例として、サンプルhtmlの31〜38行目ように…）
<script type="text/javascript">
    var f1 = new LiveValidation('name',{validMessage:""});
    f1.add(Validate.Presence,{failureMessage:""});
    var f2 = new LiveValidation('id',{validMessage:""});
    f2.add(Validate.Email,{failureMessage:""});
    var f3 = new LiveValidation('pass',{validMessage:""});
    f3.add(Validate.Length,{minimum:6,failureMessage:""});
</script>

このサンプルでは、以下のようにチェックしています。
Validate.Presence：必須項目
Validate.Email：メールアドレス
Validate.Length,{minimum:6}：6字以上の文字数

CSSで次の項目のスタイルを定義します。
.LV_validation_message：チェック時のインライン要素
.LV_valid_field：値が正当な時のinput
.LV_valid：値が正当な時のインライン要素
.LV_invalid_field：値が不当な時のinput
.LV_invalid：値が不当な時のインライン要素

チェックする項目・記述については、documentationにまとめて書かれているので参考してみて下さい。