複数のエラー配置でのjQueryの検証

Question

私は以下のフォーム入力をしています。

<div class="input-group"> 
    <input type="text" id="FirstName" name="FirstName"> 
    <span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span> 
</div> 


<div class="row"> 
    <div class="col-sm-5"> 
     <div class="form-group"> 
     <input type="text" id="LastName" name="LastName"> 
     </div> 
</div> 
<div > 
    <ul class="list-unstyled" id="LastNameErrors"> 

    </ul> 
</div> 

1）私は、入力グループ以下FirstNameのためのエラーメッセージを配置します。

2）私は、私は次の操作を行って、FIRSTNAMEの配置を達成することができます#LastNameErrors

のIDを持っているul内部LastNameのためのエラーメッセージを配置したいが、いただきました！jQueryのためのエラー配置を達成するために上記の要件に従って姓？

次は、ulに追加され続け、フィールドが有効なときにエラーを削除しません。

$("form").validate({ 
     errorPlacement: function (error, element) { 
      var placement = element.closest('.input-group'); 
      var firstNameError = true; 

      if (!placement.get(0)) { 
       firstNameError = false; 
       placement = $("#LastNameErrors"); 
      } 
      if (error.text() !== '') { 

       if (firstNameError) 
        placement.after(error); 
       else 
        placement.append('<li ><label>' + error.text() + '</li>'); 
      } 
     } 

    }); 

Answer 1

以下は、ulに追加され続け、フィールドが有効なときにエラーを削除しません。

errorPlacement: function (error, element) { 
    .... 
    if (error.text() !== '') { 
     if (firstNameError) 
      .... 
     else 
      placement.append('<li ><label>' + error.text() + '</li>'); 
    } 
    .... 

• エラー・メッセージがない場合errorPlacementは何もしませんので、あなたは条件付きif (error.text() !== '')を必要としません。

• デフォルトでは、プラグインはエラーメッセージ要素を作成し、それを動的に置換/切り替えます。このオブジェクト（error.text()）からのテキストのみを取り除き、独自の要素を作成しているため、プラグインはメッセージの検索/置換/切り替えができません。したがって、すべてのインスタンスに新しいエラーメッセージを追加し続けるだけです。

代わりに、あなたはerror呼ば全体オブジェクトを使用する必要があります。プラグインがネイティブのエラーメッセージ要素を見つけて置き換えたり、切り替えることができるため、このようなことがうまくいくでしょう。必要に応じてコードを調整します。

$("#LastNameErrors li").append(error); 

DEMO：jsfiddle.net/fLsyd7x8/

Answer 2

あなたが達成しようとしている方法は非常に奇妙ですが、一般的にエラーメッセージを表示する一般的なメカニズムが必要です。エラーメッセージを表示する場所を

しかし、あなたの問題にあなたは

$("form").validate({ 
      errorPlacement: function (error, element) { 

       var elId = element.attr('id'); 
       if(elId == 'LastName') 
       { 
        $('ul#LastNameErrors').append('<li ><label>' + error.text() + '</li>'); 
       } 
       else 
       if(elId == 'FirstName') 
       { 
        var placement = element.closest('.input-group'); 
        placement.append('<li ><label>' + error.text() + '</li>'); 
       } 
       //else more your requirements....     
      } 
     }); 

新しいエラーメッセージを追加する前に既存のメッセージをクリアすることを確認し、問題が誰であるか知っているし、その後決定する要素idをチェックする必要がありますさもなければそれは付加の上に続けます。