フォームフィールドエラーを示すにはどうすればよいですか？
フォームフィールドがエラー状態であることを示す候補が2つあります。
オプション1
オプション2
エラーアイコンはフィールド内にあるべきですか、それともラベルの隣にあるべきですか？または、他の何か？それとも関係ありませんか？
注：これは通常、すべてのフィールドの上にあるフォームスコープのエラーボックスに追加されます。
あなたの候補者のどちらもIMOは十分に強いです。ユーザーはエラーのあるフィールドを探す必要はありません。veryは明白です。
また、フィールドの横にエラーに関するテキスト（「メールアドレスのように見えない」、「パスワードが一致しない」など）を配置する必要があります。上記のすべてのフィールドは、短い形式では問題なく機能しますが、長いフィールドではかなり問題が発生します。
それが私たちのやり方です：
エラーなし
エラー
注：この例のコピーライティングはかなり貧弱です...ドイツ語を話せないことを願っています;）
オプション2の反対意見
IOS（iPhone、iPad、iPod）のユーザーであり、それが全員ではないことを知っている場合、フォームフィールドの右側にある「X」は、最初に「X」をクリック/タップするとクリアされることを示しますフィールド。
オプション2を使用する場合は、その機能を追加することをお勧めします。つまり、[〜＃〜] i [〜＃〜]が応答しますオプション1より良いです。なぜなら、私の最初の見方は、エラーがどこにあるかを探すので、より簡単にスキャンされるからです。
追加の考え
私はあなたに挑戦したいのですが、これを目立たせるためにあなたができることはこれ以上ありますか？標準に従って、慣れさせてください...しかし、その少しの追加でそれを補強してください。
おそらく、エラーメッセージにはもう少し個性があります。それは、あなたのブランドの声にある物語です。
最初の例が一番良いと思いますが、エラーアイコンがなく、カラーフィールドのみです。これは、エラーをフォームで強調表示するので最適です。一例として、これはどのように画像登録Twitterです。 
そして、これはこのリンクの別の非常に興味深い例です GWT Bootstrap 
色覚異常の人がオプション1を簡単に見つけられるとは思いません。テキストボックスの白黒アイコンが（ほとんど）全員に表示されます。
現在の提案はすべて素晴らしく、ほとんどの場合と同様に、オプション2は、表示されているアイコンがフィールドをクリアするクリック可能な要素を表すiOSなどの他のシステムとの連続性の点で、ユーザーを混乱させる可能性があると思います。
上記で見たことのない提案の1つは、入力の親に対する一時的な背景の変更です。これには3つの目的があります。
1）色が変化する領域が広くなります。それはユーザーの目を引き込みます（目に見えると仮定して）2）色が変化する領域は、ある色から別の色ではなく、白から色へと変化します。私は多くの行政システムに取り組んでおり、私たちはすべてのことにおいて色覚異常を考慮しなければなりません。 3）色がアニメーション化されると、スタイリングが失われることはありません。
ただし、このメソッドはオプション1やeBay/Twitterメソッドなどでバックアップする必要があることを指摘しておきます。アニメーションがなくなったら、ユーザーはどのフィールドに注意が必要かを常に意識する必要があります。
頭に浮かんだこと-別のアイコンが付いたオプション2はどうですか？その後、一貫性の問題はありません。感嘆符が付いた黄色の警告三角形のようなものがIMOで機能します。
オブジェクトの下にエラーメッセージを表示することは、ボックス全体を黄色またはテキストの赤色で着色することをお勧めします。この住宅ローンのサイトは方法を示しています。赤と黄色は、エラーを表示するための標準色になりました。 6フィート離れたところから、エラーとその場所がはっきりとわかります。
赤い枠線とフィールド内の画像（オプション2のように）の両方を使用しています。次に、フィールドの下にあるメッセージを赤で表示し、ツールチップで修正する方法を説明します。私たちのシステムのアイコンは、マウスポインターの代わりに「ハンド」カーソルを持っているので、この画像でカーソルを変更しないことは、アクションがないことを示します。