検証ステータス-消えるか、緑色に変わりますか？
ユーザーがフォームに入力するときに、クライアント側の検証があります。下記参照：
ここでの質問は、ユーザーが質問に答える場合、「！」ボタンが消えますか？このボタンは、入力のエラーのオン/オフを切り替える役割も果たします。
私のアイデアは、データが検証されたら、チェックでそれをグリーンにすることでした。これは、質問が不要な場合は、緑色でチェック済み（？）であることを意味します。さらに、この特定のユーザーがフォームに入力するのではなく、フォームを表示してユーザーが入力した内容を確認する「レビュアー」ペルソナがあります。この場合、これらの検証ボタンを非表示にする必要があると想定されています。
もう1つの注意点は、「？」ヘルプテキストが質問に適用されていない場合は無効になります。質問が不要な場合（検証ボタンが無効になっている場合）も、同じパターンをデータ検証に適用する必要があります。
皆さんが意味をなさないことを指摘できる他の何かをいただければ幸いです。皆さん、ありがとうございました。
編集：フォーム検証エラーをオンに切り替えると、フォーム入力は次のようになります：
もう一度編集してください：これは、皆さんから提供されたすべての情報に基づいて表示されたものです。ラベルには、それぞれの意味を追加しました。
非表示のメッセージ
デザインは、ユーザーがタスクを完了するために必要なメッセージ（ヘルパーテキストとエラーテキスト）を非表示にします。ユーザーは、ヘルパーテキストにすぐにアクセスして、最初の試行で各フィールドを正しく入力できるようにする必要があります。また、invalid入力を修正できるように、エラーテキストにすぐにアクセスする必要があります。
これらのメッセージをデフォルトで非表示にすることの有用性はわかりません。ユーザーにボタンをクリックしてエラーメッセージを表示させることは、不必要な摩擦の原因になります。ユーザーがこれらのメッセージ自体を明示的に非表示にすることが有益であるシナリオを想像することはできません。
エラートグルボタンは標準的な規則ではないため、ユーザーがクリックする可能性は低くなります。さらに、ボタンのようには見えず、ラベル！はその機能を伝えません。
成功した検証通知
これは一般的にログインフローに使用されますが、一般的なフォーム入力に使用されることはありません。プシュカルがすでに指摘したように、検証が成功したら次のフィールドにスキップしてください。これらのマイクロ検証はバックエンドシステムにとって重要ですが、ユーザーにとってそれほど重要ではありません。ユーザーがフォームを送信したいだけのときに各フィールドが検証されることを通知することは、私の意見では不要です。さらに、検証とエラーは、ユーザーが入力を提供した後にのみ表示されます。
無効なコントロール
ヘルパーテキストアイコンを無効にすると、この機能がないことを実際に示しようとしているときに、その機能が使用できないことを示します。ヘルパーテキストがフィールドで使用できない場合、アイコンを削除します。同様に、フィールドでデータ検証を実行しない場合は、検証コントロールを指定しないでください。
結論
- エラーメッセージは、エラーが検出された直後に表示されます。エラー切り替えボタン！は、メッセージ切り替え機能は必要ないため、アイコンに変換する必要があります。アクセシビリティ要件を満たすため、アイコンを削除する必要はありません。
- デフォルトでは、質問の下にヘルパーテキストを表示することを検討してください。このようにして、ユーザーがフィールドに入力している間、ヘルパーテキストは常にユーザーに表示されます。また、ヘルパーボタン/アイコン？を削除すると、ヘルパーテキストが既にすぐに表示されている場合にのみフォームに視覚的なノイズが追加されます。
- エラーが解決されたときに、検証アイコンを削除するか、多くても一時的に表示できます。保持する場合、検証アイコンは、実行された検証に応じてのみ表示されます。回答されていない質問には、検証アイコンを含めないでください。
フォーム入力および検証の前に推奨される設計。フィールドタイトルの下のヘルパーテキストはすぐに表示されます。*だけで区別される検証アイコンとオプションフィールドと必須フィールドはありません。
エラーメッセージとヘルパーテキストをすぐに表示して検証を実行した後の推奨設計。
オプションのフィールドの「緑とチェック済み」を完全にスキップしないのはなぜですか？そうすることで、ユーザーは必要なフィールドにさらに集中できます。
！データが有効であることがわかると、緑色に変わり、チェックされます。それ以外の場合は、ユーザーが次のフィールドに移動したときにエラーを切り替えます。
このアニメーションを行うのは「正しい方法」ではないと思います。スムーズな移行を伴うあまり目立たないものや、効果が大きいものを使用できます。
フォーム、フォーマルなものの場合、主な目標はプロセスを高速化することであり、アニメーションに注意を向けないことです。手順は次のとおりです。赤+ "！" ->緑+ "！" ->緑+「✓」。
ユーザーを楽しませることが目的の場合、これは https://codepen.io/dcarock/pen/OPqGrM または https：//site.uplabs .com/posts/form-validation-interaction 。