1

エラーメッセージを表示するタイミングとの戦い。私のコードは以下ですが、基本的にフォームは BLUR の入力フィールドを検証する必要があります。ほとんどの場合、これはかなり受け入れられます。

ただし、次にクリックするのがフィールドの横にあるヘルプ アイコンでない場合にのみ、検証がぼかしに表示されるようにする必要があります。

私のクライアントは、フィールドにタブで移動し、そのままにしてヘルプをクリックする (ぼかし機能をトリガーする) 場合、これは良いユーザー ジャーニーではないと言って戻ってきました。ヘルプをクリックすると、フィールドがフォーカスを失うため、実際に何も入力せずにユーザーにエラーメッセージが表示されます。

必須フィールドであるため、検証を試みる前にフィールドが空かどうかを確認できません。また、フィールドが空のままの場合にもエラーが表示される必要があります。

説明するのは少し難しいですが、うまくいけば大丈夫です。

HTML

    <div class="question" id="PD_email">

 <label>Email address</label>
 <input class="v-middle jsValid_email" id="email" type="text" size="50" />
 <label class="inline helpTrigger cursor">Why do we ask for this?</label>

 <div class="hidden help rounded03 aboveTrigger" style="left:385px;" id="emailAddress_help">
  HELP MESSAG IN HERE
 </div>

 <div class="error hidden">
  ERROR MESSAGE IN HERE
 </div>

</div>

<div class="question" id="PD_phone">

 <label>Phone number</label>
 <input class="v-middle jsValid_phone" id="phone" type="text" size="50" />
 <label class="inline helpTrigger cursor">Why do we ask for this?</label>

 <div class="hidden help rounded03 aboveTrigger" style="left:385px;" id="emailAddress_help">
  HELP MESSAGE IN HERE
 </div>

</div>

jQueryスクリプト

 $('input').blur(function() { 
         if ($(this).hasClass('jsValid_email')){
     if (($(this).val()=='') && ($(this).hasClass('jsOptional')))
  {/* do nothing*/}
  else {
  email(this.id);
        }

次に、特定のタイプの入力フィールド (email、phone、alpha、dob など) を検証する関数を呼び出し、BLUR の検証チェックに失敗すると、フィールドに色を付け、赤のラベルを付けます。

if (!($(this).siblings('.help').click())) タイプのイベントをコーディングする方法があれば、便利です!

ありがとう、ケビン

4

1 に答える 1

0

ぼかしイベントは、ユーザーがどこに行くのかを認識していないため、この方法では実行できません。検証は後で行う必要があります。次の 2 つのオプションがあります。

  1. setTimeout. しばらくしてから検証を実行し、ヘルプ ボタンの Focus イベントが実行されていることを期待します。これにより、検証が行われないことを示すフラグが立てられるはずです。これは危険ですが、達成するのは簡単です。

  2. 他のすべてのコントロールのフォーカス イベントで検証呼び出しを実行して、イベントが発生したときにどのコントロールにフォーカスがあるかを確認します。これは、フォームが大きく複雑で、他のすべてのコントロールを簡単に識別できない場合に問題になります。指定されたフィールドの Focus イベントで、検証が必要であること (イベントの順序が定義されていないか一貫していないため、ぼかしではありません) にフラグを立て、必要な場合にのみこれを処理する必要があります。

もちろん、これらのいずれの場合でも、失敗したコントロールにフォーカスを戻す必要があります。複数のコントロールでこれが必要な場合、最適なオプションは検証を送信することですが、これに満足できない場合もあります。複数のコントロールでこの処理を処理しようとする複雑さは、私の頭を悩ませます。

（そして、はい、おそらく今ではソートされていると思いますが、他の人にとっては、興味があるかもしれません）

于 2011-07-01T09:24:44.783 に答える