なぜ入力フォームに非同期でバリデーションをかけるのか

入力フォームにおいて、非同期のバリデーションが実装されていることが当たり前の時代になりました。

 

ですが、僕は制作会社時代に飽きるほど問い合わせフォームを作成してきたこともあるせいか、そもそも

 

サーバ側でもバリデートしてるんだから、別に要らないのでは？

 

と思っていました。

 

これを機に、ちゃんと理由を調べておくことにしました。

 

目的

まず、バリデーションについてですが、非同期にしろなんにせよバリデーションは必要です。

 

理由は、入力された値をノーチェックで処理すると、悪意のあるプログラムコードを実行されたりするため、システムの信頼性・機密性を下げることになります。

 

つまり品質管理の観点でMUST要件ということですね。

 

そうなると、

 

なぜ非同期通信でバリデーションをするのか

 

を考えればよいので考えてみました。自分なりに考えた結果、

 

ユーザビリティの向上のため

 

という結論に至りました。

そんなわけでその考察を今日は説明したいと思います。

 

非同期でバリデーション

何かを入力して、その値に不備があった場合、どのタイミングで教えてあげるのがユーザにとって都合がいいでしょうか？

 

その答えは「即時」です。

 

入力したらすぐに誤りを指摘してもらえれば、その時点で正しい値に修正することが出来ます。

 

3次元の世界において、例えば役所で何か申請する際は、一度書類に記入し窓口に並んで担当者に処理をしてもらいます。

 

仮に不備があれば、その場で指摘を受けながら訂正し、訂正印を押して、、、なんてことをその場でやるので時間がかかります。

 

そんなことになるんだったら、記入しているときに教えてもらえたほうがよいですよね。

 

ユーザビリティを意識される前の時代では、役所のように「1ページにたくさんの入力フォームがあり、全部入れた後にエラーが見つかったら、全部入れなおし」なんていう不親切なインターフェースも普通に存在していました。

（まぁ、役所のオペレーションは人件費を削減するために実施しているので、必ずしも悪いことだけではありませんけどね）

 

Webサイトでは、入力された値に対して「あらかじめこういう値を入れたらエラーにしなさい」という処理を入れておくことで、即時レスポンスが可能となり、ユーザにとって都合の良いインターフェーズを実現できるのです。

 

実装方式

非同期でのバリデーションが必要である、とわかったところで次に、実装方式について触れます。

 

アプリケーションであれば、c言語、java、android、iOSなどさまざまなデバイス・言語で実装できます。

Webサイトで非同期通信を利用する場合いはAjaxを使います。

 

今でも、たまに見ますが、Flash（ActionScript）でも出来ます。（ただし、Flashプレイヤーがないと動きません）

 

Ajaxは、正式名称を「Asynchronous JavaScript ＋ XML」と言いまして、ただの方式のひとつです。

言語は名前のとおりJavaScriptです。

 

実装例

ここで紹介すると長くなってしまうので、JavaScriptで非同期バリデーションをご覧ください。

 

簡易な問い合わせフォームを例に、非同期でバリデーション処理を実装したサンプルをソース込みで説明しています。

 

最後に

ここまで、「ユーザビリティの観点で対応すべきである」と述べましたが、事情によって非同期でのバリデーションが実施できない場合もあるかと思います。

 

その場合は、あらかじめ入力ミスが発生しやすい項目を調べて、注記を入れるなどはできると思います。

ユーザの任意の動作になるので、万人に対して有効であるとは言いがたいですが、最低限のユーザビリティの担保として出来る限りの配慮はしておくといいと思います。

 

なお、「そこに注記がありますよね」といった免責に使うのは良くないのでくれぐれもご注意を。