ユーザーがフォームに入力するまで送信ボタンを無効にする
ユーザーがフォームまたは必須フィールドに入力するまで、送信ボタンを無効にすることについてどう思いますか？
ここでux.seで同様の質問を見つけました。ユーザーは、フォームが壊れているとすぐに何が起こっているのか理解できないとユーザーが思うだろうと答えました。
非表示にするのはそれほど良いことではないと思いますが、無効化（グレースケール、不透明度など）とボタンの短いテキストを追加すると、ユーザーはまだ何かを入力する必要があることに気づくため、使いやすさが向上します。
送信後の通常のエラーメッセージ/検証以外に、経験や例がある人はいますか？
Alert のように、「field1、field2などに入力した後、フォームを送信できます」のように、その横に簡単に説明できない限り、送信ボタンを有効な状態で表示する必要があります。 。この説明は、ボタンのすぐ隣にあり、明白である必要があります。
必要な処理が完了したかどうかをユーザーに伝えるために、送信ボタンの状態だけに依存するべきではありません。最初に、最初の必須フィールドに自動フォーカスし、ユーザーがフォームを通過するときに成功/エラーメッセージを提供することでユーザーを支援できます（Bootstrapの- Form control states を参照してください。例）。
まだ実装されていないが、アプリケーションによっては機能する場合があるという考えの1つは、ユーザーがいつでも送信できるようにすることです。それらを同じフォームに戻して（ページのリロードの有無にかかわらず）欠落していたものを入力する代わりに、それらを表示のみ必須フィールド彼らが記入していないこと：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ここでの考え方は、必要なすべての情報を入力することに失敗したことをユーザーに通知してユーザーを不快にさせることではありません。それを一歩踏み出して、人にこれを明確にしているかのように、まだ必要なものを尋ねてください。ユーザーが何かを正しく行わないことで愚かに感じることから利益を得ることは決してないので、彼らを許してもう一度尋ねてください-彼らはそもそも何か間違ったことをしたからといって、それを知る必要はありません！
理想的なアプローチは、次のことです。
テキストとスタイルを使用して、必要なフィールドに明確にマークを付けます。
それらが入力されたら、スタイルが変更されて完了したことを示します（つまり、背景を赤から青に変更し、緑のチェックマークを追加します）。
送信ボタンを無効にします（これは Poka-Yokeの原則 に従い、優れたUXです）が、「Xフィールドにまだ入力する必要がある」などのテキストを追加します。
必要なすべてのフィールドが入力されるまで（マークされているフィールドを明確に示している場合）、それを無効にするか、アクションを許可して、理由を含めてフォームを送信できないというメッセージをポップアップ表示します。
ぼかしまたはフォーム送信時にデータを検証する代わりに送信ボタンを無効にする場合（送信ボタンが無効になっていない場合）、必要なフィールドについてユーザーに明確に通知する必要があります。そうでなければ、あなたは彼らにフラストレーションを引き起こします。
また、一部のユーザーはJavaScriptを有効にしていないため、フォームが壊れるだけであることに注意してください。 JavaScriptが使用できない場合は、フォームを使用可能にすることをお勧めします（「ナイス」ではありません）。