■ フォームの入力エラーを吹き出しで教えてくれる JavaScript
フォームの validation 関連のライブラリはいくつかありますが、私は以下に紹介するやつをずっと使ってまして、これがかなり気に入ってます。ただ、オレナイズされたコードが随所に含まれていたから紹介する事が出来ないでいたのですが、今回やっと書き直したのでお目見えです。
AJAX を使ってサーバサイドと連携、とかそういう事も全くやってなくて、普通に JavaScript のみで入力のチェックをしてるだけなんで、真新しい事はないんですが。
とりあえず submit ボタンを押せば、全て理解出来るかと思います。
今回は CSS のファイルと画像のファイルといっぱい出来てきてしまっていて、いつもの「読み込ませるだけ」とはちょっと毛色も違い、使うのには事前の準備が必要で面倒です。
* 最初に
当たり前の話しなのですが、JavaScript で入力のチェックをしたからと言って、サーバサイドに送信されるデータがチェックを通過したものであると考えてはいけません。このライブラリは、ユーザがフォームを送信する前に入力のミスを検知し、利便性を向上させるのが目的であって、サーバに送信されるデータの正当性を確保する事は出来ません。必要に応じて、サーバサイドでのチェックも行ないましょう。*1
* 使い方
まずはスクリプトファイルのアーカイブをゲットしましょう。
あとは動作サンプル用の valid.html (上の動作サンプルと同じものです)を見ながら頑張ればなんとかなると思います。が、一応解説も書いておきます。
まず入力チェックをしたいフォームの form 要素に、onsubmit="return Validator.submit(this)" を入れます。フォームを送信する前に、各フィールドの値が正しく入力されているかどうかを最終的に判断するための処理を行なっています。
あとは、チェックを行ないたいフィールドに個別に onblur="Validator.check(this)" と入れて、入力のチェックを行なわせるようにするだけです。これで必須入力のフィールドが出来上がりました。
他には Validator.check の第二引数を使って、チェックする内容を指定する事が出来ます。例えば、onblur="Validator.check(this, 'mail')" とすると、入力された値がメールアドレスかどうかをチェックしてくれるようになります。第二引数には以下の値を使う事が出来ます。
- mail - メールアドレス
- kana - 全角カタカナ
- alphabet - [a-zA-Z0-9\-] のみ
- equal - 他のフィールドとの比較
- count - 入力文字数
- num - 数値
- check - チェックボックスのチェック数
equal は良くある「確認用のパスワードはこちら」みたく二つのフィールドに同じ値を入れる必要がある場合に利用します。equal を使う場合は、第三引数に比較を行ないたいフィールドの name 属性値を入れる必要があるので忘れないようにしましょう。詳しくは valid.html をチェックだ。
count と num は範囲を指定する事が出来ます。例えば、5文字〜10文字の範囲で入力して欲しい場合は、onblur="Validator.check(this, 'count5-10')" などとして範囲も一緒に指定します。範囲を指定する方法はいくつかあるので、詳しくは valid.html をチェックして下さい。なんか手抜きチックだけど、多分見た方が早いんで。
ラジオボタンとチェックボックスの場合は要注意です。吹き出しを出したい要素にのみ onblur="Validator.check(this)" を指定します。name 属性が同じなら、どれか一つにだけ入っていればフォームの送信時に吹き出しが表示されるようになるので、全部の要素に入れておく必要はありません。チェックボックスに関しては、count や num と同じように check-2 などとする事で、例えば2個以上のチェックが必須になります。
スペースで区切ると、複数の項目でチェックをする事も出来ます。例えば、6文字以上のアルファベットを入力して欲しい場合は alphabet と count6- を組み合わせればいいので、onblur="Validator.check(this, 'alphabet count6-', ... とします。
入力内容のチェックは行ないたいけど、必須ではない場合、例えばメールアドレスの入力欄はあるけど、入力しなくても良い場合などがあると思いますが、そういう時は、頭に ! を付ければ必須ではなくなります。 例の場合は onblur="Validator.check(this, '!mail')" です。
* エラーメッセージ
吹き出しに出力されるエラーメッセージは、Validator.rule の中に Unicode escape して書いてあります。グリモン本のサポートサイト に、Unicode escape のツール があるので、それを利用しました。Unicode escape しておくと、ドキュメントの文字コードが何だろうがちゃんと表示出来るのでお勧めの方法です。
* 拡張
新しいエラーチェック用のルールを作りたい場合は、Validator.rule に追加すればすぐ使えます。例えば、YYYY-MM-DD 形式をチェックしたい場合は、validator.js に次のコードを追加して、onblur="Validator.check(this, 'date') と指定すればうまく動きます。
Validator.rule.date = function() {
if(!this.value.match(/^\d{4}-\d{2}-\d{2}$/))
return 'here is error message';
}
* デザインの変更
吹き出しとかの画像を変えたりしたい場合は、CSS ファイルをいじるだけで変更できるようにしてあります。基本的な画像の構成が変わらなければ、そんなに難しい作業ではありません。注意が必要なのは、div.baloon img でボックスの高さを確保している点です。画像の高さが変わる場合は、ここの指定を変更する必要があります。クロスブラウザのためにちょっと面倒な事になってるんですけど、まぁ、そんな感じ。
* ライセンス
いつもの通り、パブリックドメインを宣言しておくので、どうぞ好きなように利用して下さい。もちろん画像も。
* Just-size.networks は最高です
see also. http://www.just-size.net/
* 更新履歴
- XHTML 環境で親要素に position:relative が指定されていると吹き出しが表示されない問題を修正しました。
- XHTML 環境で吹き出しの表示に問題があったので、修正しました。
- 警告表示用のメッセージを分離して、簡単に多言語対応出来るような仕組みを用意してみました。
ので、英語が堪能な方からの翻訳待ってます。 - Array.prototype を拡張している環境で問題があったので、修正しました。
- num や count の範囲を渡す処理に不具合があったので、修正しました。
- num, count での 不具合 を修正しました。
- チェックボックス用に check 識別子を追加しました。
- ルールの password を equal に変更し、フィールドの同一性を確保する機能とした。
- いくつかのエラーメッセージがわかりにくかったので、変更しました。
- validater というスペルが誤っている事を 教えてもらった ので修正しました。こういうのは気付きにくいので、指摘してくれる事は大変嬉しいです。
- *1: 高木先生に 指摘されて、表現を変更しました。変更前:
当たり前の話しなのですが、JavaScript で入力のチェックをしたからと言って、サーバサイドでの入力値のチェックをさぼってはいけません。このライブラリの目的は、ユーザがフォームを送信する前に入力のミスを検知し、利便性を向上させるのが目的であって、セキュリティ的なチェックの役目は全くもっていないのでそこん所は忘れないでおきましょう。
Posted by Kyosuke Takayama at 2007-02-04 (Sun) 23:12 printable version
1) 向井 (2007-02-11 (Sun) 23:46)
これ、 num-200 の例で「50」とかを入力すると invalid とみなされるようですね。コードを見たところ、numメソッドでは文字列のまま比較しているように見受けられます。
数値化して比較しないとうまくいかないのではないでしょうか。