フォームのサブミットボタンディスエーブル

フォームにおいて、入力が完了するまで、サブミットボタンをディスエーブルにする。
理由：入力内容が満たされていない状態でサブミットされることを防ぐため。

効能

• 入力内容が満たされるまでサブミットボタンをディスエーブルにすることで、不備のあるデータが送信されることを防げる。
• サブミット時に、入力内容が満たされているかどうかのバリデーションが不要になる。
• ユーザーは、サブミット後、入力不備のエラーメッセージを見なくてすむ。

用法

• フォームのサブミットボタンを、入力内容が満たされていなければディスエーブルに、満たされていればイネーブルにする。
• 入力内容が満たされているかどうかのチェックは、入力コントロールのクリック時、値の変更時、フォーカスアウト時など、適当なタイミングで行う。入力の状態ができるだけリアルタイムに反映されるようにする。
• 入力内容のチェックには、三種類ある。できるだけユーザーがエラーメッセージを見なくてすむ方法を検討する。
  • 入力必須項目が埋められている。
  • 入力必須項目の値が、それぞれ、規定の書式を満たしている。
  • フォーム全体として、有効なサブミットデータを形成している。値同士の相関も整合している。
• 完全なバリデーションをローカルで行うことが困難な場合でも、可能な部分はローカルで行い、フォームのサブミットボタンディスエーブルを用いる。

注意書き

• ひとつのフォーム内に入力コントロールがたくさんある場合、バリデーションが厳密すぎると、かえって不便になる場合がある。例えば、いくら入力をしてもなかなかサブミットボタンが押せるようにならないということが起きる。そのような場合は、有効な値に関するガイドをリアルタイム表示するか、もしくは、バリデーションを緩めてとりあえずボタンを押させ、細かな不備についてはサブミット後のエラーメッセージでユーザーに伝えるようにする。