Webをうろついていれば、多種多様な入力フォームに遭遇しますが、かけられているバリデーションにストレスを募らせる例もあります。
入力途中に書き換えられるフォーム
これは以前にもテーマにしましたが、ユーザーの入力が続いている途中にデータを変換してしまうと、
- 入力したものがいきなり違うものになると、感覚的によろしくない
- 特に、入力した文字を直後に黙って消してしまうと、「打てていないのかな？」と再度打ち込むけどやっぱり消える、で動いていないんじゃないかと思わせてしまう
- カーソル位置がずれる
など、入力する側にとってストレスとなってしまいます。値を変換するのであれば、入力フォームからフォーカスが外れたonblurのタイミングを狙ったほうがいいでしょう。そして、変換する内容についてフォーム周辺に書いておくこともおすすめします。
maxlengthの問題
入力中に変更を加えてしまうようなJavaScriptは、あえてそう書かないと発生するものではありませんが、HTML5にあるmaxlength属性は、文字数を超えようとすると超えた分が打てなくなるという実装が多いので、この問題が起きます。とりわけ、パスワード入力欄の場合、表示で入力内容がぶった切れていることがわからないので、ユーザーもシステム側も認識しないまま、正常値として意図しない値が登録されてしまう結果になります。
maxlengthをかけていいのは、
- 郵便番号・JANコードなどのように、入力するものの長さが明らかな場合
- 一般的に考えられる入力に対して十分すぎる長さが取ってあるデータベースカラムに入れるデータに対して、カラム長を超えないよう保険として1入れておく場合
ぐらいです。
入力途中で出されても嬉しくないバリデーション
こんどは純粋にバリデーションの話題ですが、入力途中でもJavaScriptでチェックしてバリデーションをかけるような仕組みを作っている例もあります。ただ、これもやりすぎると不興を買うかもしれません。
たとえば、メールアドレスの入力欄でjkr_2255@example.comのような入力をしたいとします。そして、jkr_2255@example.cまで打っているうちに「メールアドレスが正しくありません」と出てきたら、きっとイラッとしかしないことでしょう。
このように、「入力全体で書式チェックをするもの」や「IDなどの重複チェック」は、いま入力として不適当だったとしても、入力を続ければ適切な入力になりうるので、途中チェックはあまり適当ではありません。
逆に、「入力すべきでない文字が入った場合」は、その後入力を続けても不適切な入力が解消されることはないので、入力された瞬間にバリデーションエラーとしても問題はないと考えます。
-
もちろん、サーバサイドでのチェックは必要です。 ↩