2007-02-04 (Sun)

フォームの入力エラーを吹き出しで教えてくれる 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メソッドでは文字列のまま比較しているように見受けられます。
数値化して比較しないとうまくいかないのではないでしょうか。

2) takayama (2007-02-12 (Mon) 10:20)

あら、だめですね。
ご指摘感謝です。
直しておきます。

3) ken (2007-03-06 (Tue) 15:37)

はじめまして。とてもとても素晴らしいライブラリです!

ひとつ気づいた点がありますので報告させていただきます。

position: relative;

が指定されているdivブロックの中で
#hoge{
position: relative;
}



のように使うと、エラーチェックでふきだしが出るタイミングでスクリプトエラーが出るようなのです。


現象を確認したのはIEの6だけです。

firefoxでは問題なく使えるようです。

仕様なのかIEの不具合なのかわかりませんが、一応報告させていただきます。

4) ken (2007-03-06 (Tue) 15:38)

あっ、↑
スクリプトの説明をしてる部分が抜けちゃったようです。

だいたい伝わりますかね?
div id=hoge
の中で使うと、スクリプトエラーが起きますという意味です。

5) takayama (2007-03-06 (Tue) 16:17)

ありがとうございます。
xhtml ですよね?

多分 util.js を更新してもらえればエラーはでなくなると思います。
実は IE & XHTML だと吹き出しの位置が上にずれちゃうんですよね…。

6) canal (2007-04-18 (Wed) 14:01)

はじめまして、趣味程度にプログラミング
をやっています。

フォーム入力チェックのスクリプトを
Netcommonsという教育用CMSの
汎用データベース機能(モジュール)に
組み込んでみました。
使い勝手がかなりよくなりました。
ありがとうございます。

Netcommonsの改造部分と鷹の島さんの
スクリプトを一緒にtar.gzして配布し]
たいと考えています。
問題ございませんか?

Canal ttp://yachtman.plala.jp
netcommons ttp://www.netcommons.org

7) takayama (2007-04-18 (Wed) 23:49)

こんにちは。
もちろんここで配布しているコードや画像はどのように利用しても構いません。
連絡したり、リンクをしたりする必要もありません。好きなように使って下さい。

逆にシステムの一部にまで組み込んでもらえるなんて、とても嬉しい事だと思っています。

8) yama (2007-07-07 (Sat) 00:08)

リセットボタンを押すとエラーで出たメッセージが全て消えるということをしたいのですが
できるでしょうか?
onclick="self.close()"とするとウィンドウが閉じてしまいました・・・

9) takayama (2007-07-07 (Sat) 08:57)

onclick="Validator.allclose();"
でイケると思います。

10) yama (2007-07-07 (Sat) 09:51)

お返事ありがとうございます!

早速試してみたのですがダメでした。
私だけでしょうか?・・・

11) takayama (2007-07-07 (Sat) 10:15)

onclick="Validator.allclose(this.form)" で

12) yama (2007-07-07 (Sat) 11:46)

動作OKです!ありがとうございました^^

13) コメさん (2007-08-06 (Mon) 17:25)

始めまして!
とても素適なスクリプトですね。
是非とも使わせていただきたいのですが、
プルダウンメニューの所が選択してもエラー【選択が必要です】と
出でしまうのですが・・・。
どう直せばよいかアドバイスがほしいのですが、
お時間がありましたら返信待ってますのでお願いします。

14) takayama (2007-08-06 (Mon) 18:18)

value の値を見て、選択したかどうかを判断しているので、value が false になるような値(value=""とか)だと警告が出ます。
それ以外だとちょっとすぐにはわかりません。

15) コメさん (2007-08-07 (Tue) 09:25)

takayamaさん昨日は早い返信ありがとうございます。

頂いたアドバイスなのですが・・。

(value="")は使っていないのです。
私の方でも調べてはいるのですが、やはり分かりません。

すぐでなくても構いませんので原因が分かりましたら教えていただけないでしょうか?
(図々しくてすみません・・・)

私の方でうまく動きましたらmailで送ります。


ちなみに下記が組んでみたものです。
jsフォルダとヘッダに入れたプログラムはこのサイトにあるものをそのまま仕様しています。


▼ここから選択してください
選択1
選択2
選択3
選択4
選択5
選択6
選択7
選択8
選択9
選択10
選択11

16) コメさん (2007-08-07 (Tue) 09:38)

先程はすいません・・。
送ったプログラム部分が見えませんでした。

<>を全角にせずに送ってしましました。

もい一度再度送らせてもらいます。


ちなみに下記が組んでみたものです。
jsフォルダとヘッダに入れたプログラムはこのサイトにあるものをそのまま仕様しています。


<select name="お問合せ内容" id="reply" onblur="Validator.check(this)">
<option selected>▼ここから選択してください</option>
<option>選択1</option>
<option>選択2</option>
<option>選択3</option>
<option>選択4</option>
<option>選択5</option>
<option>選択6</option>
<option>選択7</option>
<option>選択8</option>
<option>選択9</option>
<option>選択10</option>
<option>その他</option>
</select><body></body>

17) takayama (2007-08-07 (Tue) 17:28)

value の値を見ているので、value に値が入っていないと動作しません。

18) 神崎 (2007-12-09 (Sun) 20:02)

ちょっと質問があります。
この吹き出しを吹き出しではなく、入力フォームの下などにDIV領域を作りそこにinnnerHTMLなどで流し込むにはどのようにしたらよいのでしょうか?
また入力欄のピンクの色を変えるにはどのようにしたらよいのでしょうか?

19) takayama (2007-12-16 (Sun) 13:41)

吹き出しは Validator.baloon.element#create で生成しているので、ここを変えれば良いと思います。でも吹き出し使わないのなら、TMT Validator とかそういうの使った方が楽だと思いますが。

入力欄の色は Validator.baloon.element#show で指定しています。

20) hiro (2008-02-05 (Tue) 11:37)

有用なライブラリ有難うございます。 社内WEBアプリに組み込ませていただいております。

ルールを追加して気づいたのですが、"password1" "password-2" などのようにルール名に数字やハイフン(-)を入れると文字数チェック(count)ルールとバッティングする様で上手く動きませんでした。 アンダーバー(_)を使えば回避できるので問題ないのですが、暇なときや見直しされるとき修正方法を教えていただけると嬉しいです。

21) am (2008-03-08 (Sat) 15:14)

メールフォームに組み込み使わせて頂いております。
有り難う御座います。

ところで、全角カナのチェックの際に長音記号が入っていると
全角カナではない、と怒られるため以下のように修正見たところうまくいきました。

kana: function() {
for(var i = 0;i < this.value.length;i++) {
if(this.value.charAt(i) == ' ' || this.value.charAt(i) == '\u3000' || this.value.charAt(i) == '\u30FC') continue;

\u30FC 即ち「ー」をチェックから除外するようにしています。

取り急ぎご報告まで。宜しくお願い致します。

22) (2008-03-19 (Wed) 13:55)

ソースコードにはコメントを記述する癖を付けた方が良いです。
日常的にコードを書くようになったときにどのタイミングでコメントを書くべきかわからなくなるのと、複数人でコーディングする際は面倒なことになりますんで。

23) tac (2008-04-17 (Thu) 22:41)

すばらしいですね。

入力フォームに利用させて頂きます。
利用者の利便性が上がりますね。

設置するほうにもやさしいのがうれしい限りです。

24) ttt (2008-05-26 (Mon) 13:58)

エラーメッセージ(吹き出し)が入力フォーム右上にこないのですが、
どこをいじればよいでしょうか??

25) たかし (2008-07-02 (Wed) 10:57)

システムの画面に組み込ませて頂いてます。
有り難うございます。

質問
1、
金額入力のフィールドがあり、数字のみ (num)のエラー項目をしたのですが、
これだと三桁ごとのカンマ入力をした場合にエラーになってしまいます。
なにか対策がありますでしょうか?

2、
全角カナのチェックはあるのですが、
半角カナのチャックはないのでしょうか?
あと半角カナのチェックがあるようでしたら、
全角カナと半角カナのどちらかならばOKみたいな
設定もできるのでしょうか?

ご連絡おまちしています。

26) elc (2008-10-09 (Thu) 21:22)

本文にある通りに「拡張」をおこなってValidator.jsの末尾にルールを追加してFirefoxで実行すると、

rule[m] is not a function
[Break on this error] response = rule[m](RegExp.$1);

と怒られてしまいます。
これは何がいけないのでしょうか。
ご連絡お待ちしています。

27) yasu (2008-11-28 (Fri) 11:00)

質問させていただきます。

OpenAreaで画面に項目を開閉する場合、
フォームの入力エラーの吹き出し位置がずれてしまいます。

(ワーニングメッセージを「x」ボタンで閉じたとしても、次に同じようにワーニングメッセージが表示されるとボタンの位置ではなく、同様にずれた位置に表示されます。)

ウィンドウサイズの変更ではY座標のずれは発生しないので、せめて再度表示する場合にはボタンの位置に表示されるようにできないのでしょうか?

//-----以下サンプル----------//
追加住所
追加する住所が上記住所と異なる場合はご入力ください。



上記以外の住所を追加する。


氏名




*****


       :
//------------------------//

対処方法としてどのようにしたら
よろしいでしょうか?

28) yasu (2008-11-28 (Fri) 11:14)

すみません。15番の方と同じ事をしてしまいました。

//-----以下サンプル---------//
<h3>設置住所</h3>
<p class="an">設置する住所が送付先住所と異なる場合は、チェックをして設置先情報をご入力ください。</p>
<table class="fm">
<tr>
<td>
<label>
<input type="checkbox" id="checkOpen" name="checkOpen" onClick="JsCheckclick()" />
上記以外の住所に設置する。
</label>
</td>
</tr>
</table>

<!-- ▽ 追加住所(非表示) -->
<div id="openArea">
<table class="fm">
<tr>
<td>氏名</td>
<td>
姓<input class="txtf" type="text" name="sname" id="name" />
名<input class="txtf" type="text" name="sname2" id="name2" />
<br />
<span class="cap">*****</span>
</td>
</tr>
       :

29) nakade (2008-12-15 (Mon) 09:31)

おはようございます。

使わせていただいていてバグを発見しました。

チェックボックスを利用する際、選択項目が
複数ある場合は問題ないんですが、1つだけの
場合は期待する動作をしません。

サンプルコード


30) nakade (2008-12-15 (Mon) 09:34)

普通のHTMLでサンプルコードを書いたため先の
投稿に反映されませんでした。再投稿させていただきます。

<form action="confirm" method="post" onsubmit="return Validator.submit(this)">
<input type="checkbox" name="ck1" value="hoge" onblur="Validator.check(this)">
<br>
<input type="submit" value="submit">
</form>

31) nakade (2008-12-15 (Mon) 10:27)

29の件ですが、validator.jsの

input: function() {
if(this.field.type == 'radio' || this.field.type == 'checkbox') {
for(var i = 0, e; e = this.field.form[this.field.name][i]; i++)
if(e.checked) return;
return this.msg.noselect;
} else if(this.value == '')
return (this.field.type == 'select-one') ? this.msg.noselect : this.msg.noinput;
},

input: function() {
if(this.field.type == 'radio' || this.field.type == 'checkbox') {
if(this.field.form[this.field.name][0]){
for(var i = 0, e; e = this.field.form[this.field.name][i]; i++)
if(e.checked) return;
}else{
if(this.field.form[this.field.name].checked) return;
}
return this.msg.noselect;
} else if(this.value == '')
return (this.field.type == 'select-one') ? this.msg.noselect : this.msg.noinput;
},

のように改変して解決することができました。
IE7とFF3で動作に問題がないことを確認
しましたが、他のブラウザでは未確認ですので、
これが正しいかどうかは不明です。

では、失礼します。

32) iguigu (2009-09-03 (Thu) 19:51)

こんにちは、とてもすばらしい出来で活用させていただいております。
ひとつ質問ですが、「全角かな」のチェックはどのようにすれば可能でしょうか?

大変お忙しい中申し訳ございませんが、ご教授いただけるとうれしいです。
宜しくお願いいたします。

33) ikuyon (2009-09-04 (Fri) 11:25)

こんにちは。とてもよくできているので、利用させていただいています。
ところで、下記のようなケースは対応できますでしょうか。

複数のテキストフィールドがあって、どれか一箇所は入力が必要になるケースです。checkboxはできそうですが、テキストフィールドに利用することはできますか?。
よろしくお願いいたします。

34) yoko (2009-10-28 (Wed) 21:49)

こんにちは。こちらのスクリプトを使用させていただいております。

質問です。上記で yamaさんが質問されている内容で、同じようにresetボタンを押してバリデータチェックを外す~で
onclick="Validator.allclose(this.form)"
を入力すれば…
とあったのですが試してみたところうまく動作しませんでした。

導入箇所は以下です


他のスクリプト等が原因でしょうか?
お忙しいと思いますが、宜しくお願いします。

35) yoko (2009-10-28 (Wed) 21:52)

ごめんなさい。
導入箇所はこちらです。

<input type="image" src="../common/img/b_reset.gif" alt="リセット" value="reset" onmouseover="this.src='../common/img/b_reset_a.gif'" onmouseout="this.src='../common/img/b_reset.gif'" onclick="Validator.allclose();" id="" />

36) bicycle (2010-01-20 (Wed) 10:06)

大変お世話になっております。

count-50等に設定し、50文字を超えた場合、バルーンと文字がずれて、文字がバルーンの下に表示されてしまいます。解決方法等ありますでしょうか?

37) SA (2010-01-24 (Sun) 00:24)

カナ限定の時、「ー」が入ってると弾かれてしまうようです。

38) (2010-03-20 (Sat) 16:33)

大変お世話になっています.

prototype.jsを使用しているとPosition.offsetという関数はないと起こられてしまいます

39) 38 (2010-03-20 (Sat) 17:32)

とおもったら,

としていたことが原因でした.

でかいけつしました
申し訳ありません

40) yama (2010-04-15 (Thu) 16:32)

はじめまして。こちらのスクリプトを使用させていただいております。
質問なのですが、
入力チェックに該当した際に出る吹き出しを、
submitのボタンには出ないようにしたい(色も変わらないようにしたい)のですが、
可能でしょうか?
よろしければご教示をお願いいたします。

コメントはお気軽にどうぞ

Cookie に保存しますか?


・スパム対策のため、http:// を含むコメントの投稿は出来ません。
・スパムチェックのため、投稿がすぐに反映されない場合があります。
・メールアドレス入力欄には何も入力しないでください。

トラックバック

トラックバックURL: http://espion.just-size.jp/mt-tb.cgi/648

桜が咲く頃にふと想ふ 〜結婚式まで後1ヵ月ぐらいの巻〜: [JavaScript]フォームの入力エラーを吹き出しで教えてくれる JavaScript (2007-02-07 (Wed) 09:25) 50%

こういうの欲しかったんですよー。勉強のためにも後で解析させて頂きますm(__)m ただ、気になるのは”Validater”じゃなくて”Validator”のような・・・


Web2.0/SEM/Web Optimization: 【ユーザビリティ】JavaScriptでフォームの入力エラーを吹き出しでより直感的に見せる方法とは? (2007-02-07 (Wed) 12:10) 50%

まだまだ日本でもエントリーフォームのエラーチェックにJavaScriptを利用し...


おはよう。目覚めは眩しくて、悲しい…: フォーム入力のユーザビリティ (2007-02-10 (Sat) 17:34) 50%

今日は意味もなくたくさん日記を書いてみる。 まずはサイト作成の方面から。 入力フ...


鷹の島: 吹き出しバリデータと TMT Validator を組み合わせてみた (2007-02-20 (Tue) 15:28) 50%

TMT Validator っていうフォームの入力値チェック用のライブラリがありまして、これって結構見た目とか簡単にカスタマイズ出来て、何気にすごい便利なライブラリなんで、この前紹介した 吹き出しバリデータ でやってるのと似た方法でエラーを表示するコールバック用のコ...



この記事のリンク元

 
Copyright (C) Kyosuke Takayama, All rights reserved.