web-dev-qa-db-ja.com

プロモーションコードの検証を表示する最良の方法は何ですか?

プロモーションコードの入力フィールドに取り組んでおり、有効な入力と無効な入力の両方についてユーザーにフィードバックを提供したいと考えています。入力の近くにフィードバックを表示したいのですが、フィールド内にアイコンがあると問題が発生しますか?

enter image description here

-プロモーションコードは固定長(5〜9文字)

1
discodelphia

特に入力フィールドに「×」を使用する場合は注意が必要です。一部のユーザーは、入力をクリアするための「×」を含む入力フィールドに慣れている場合があります。

たとえば、一部のブラウザは (標準<input type="search"/> 入力をクリアする「×」のフィールドとして。

ここChromeで見られる:

search input field

美学は素晴らしいことだと私は同意しますが、おそらくあなたのエラーメッセージの前に、外見はニースと同じように見えると思いますか?

entered入力したプロモーションコードは無効です。もう一度やり直してください。

または、「ⓧ」を実際に接続して入力をクリアし、violaでその問題を解決できます。

3
maxathousand

以前は両方の方法で実行したことはありましたが、通常はモバイルとデスクトップのどちらであるかによって異なります(どちらを指定するかは指定していません)。

ここでは、類似のトピックについて議論しているトピックを見つけることができます。 インライン検証アイコンの使いやすさ

ここでは、同じトピックに関する調査を見つけることができます: http://alistapart.com/article/inline-validation-in-web-forms

検討した方がよいマイナーな変更がいくつかあります(ただし、質問の範囲外です)。

  1. フィールドテキストが予想される入力と同じ幅であることを確認してください。 (私はあなたがこれをある程度行ったと思います、それがただのモックアップのためだけではないことを確認してください)
  2. キューポンがオプションのフィールドであることを示します。
  3. プレースホルダーテキストには、「オプションのプロモーションコード」の代わりに、キューポンの例を表示できます
  4. ユーザーが追加したキュポンを削除するオプションをユーザーに提供します。割引を見た後、それを使用する意味がわからない場合があります!
0
Federico Kotek