web-dev-qa-db-ja.com

テーブルの特定のフィールドでエラーを表示する最良の方法は何ですか?例:列の一部がフォームフィールドである単一行のエラー

enter image description here

例:列の一部がフォームフィールドである単一行のエラー。

5
Sknny

エラーメッセージでは、それは関連付けに関するすべてです。
テーブルでの実装の経験はありませんが、フォームのルールをテーブルに適用できない理由がわかりません。

フォームの場合、エラーを含む入力フィールドの真上、真上、または真横にエラーメッセージを表示することをお勧めします。
エラーメッセージを赤色(弱いパスワードなどの差し迫った問題の場合はオレンジ色)で支援すると役立ちます。たとえば、エラーメッセージの赤い文字や赤い背景色。またはエラーを含む入力フィールドの赤い境界線および/または背景色。
もう1つは、入力中または入力直後に検証することです。可能な場合は、ユーザーがフォームを送信する前にエラーを表示したり、場合によっては支払い行を追加したりできます。
アニメーションは、ユーザーがエラーをすばやく修正するのに役立ちます。赤の背景色を明るい赤から鈍い赤に点滅させる(明るい赤のフォント色の鈍い赤い背景色は、エラーメッセージに広く使用されているスタイルです)と、注意を引くのに役立ちます。入力フィールドがすぐに振動する例も見ました。

テーブルの問題は、テーブルが大きく、スペースが少ないことです。
行またはセルに赤い背景を付けることは、すでにエラーの関連付けに向けた大きな一歩です。しかし、どこにメッセージを表示するのですか?
前述のとおり、スペースが不足している可能性があります。

テーブルの上部にエラーメッセージを表示できます。添付した画像を見ると、入力行がテーブルの一番上にあるため、メッセージが近くにあります。
しかし、エラーがテーブルのさらに下で発生する可能性がある場合、長いテーブルの上部に表示されると、メッセージが遠くまで届くことがあります。

その場合、エラーを含む行の後にエラーメッセージを含む行を追加することを考えることができます。

または、エラーを含むセルを指しているエラーメッセージのツールチップ(これは、その下の行の一部をカバーします)。

または、いくつかのモーダルのように、画面のどこかに固定された位置(右上または右下)のエラーメッセージ。

2

エラーをフィールドの横に配置します

テーブルには多くの要素が含まれていることが多いため、テーブル内のエラーを伝える最も簡単な方法は、問題のある要素のすぐ隣にエラーメッセージを配置することです。

例えば:

enter image description here

4
tohster