jQueryバリデーションon input-append（Twitter Bootstrap）

Question

私はサイトにtwitterブートストラップを使用しており、jquery.validateを使用しています。

私は入力要素にボタンが付いた入力要素を持っています。これは私たちのjsバリデーションの中の必須フィールドです。

コードは次のとおりです。

<div class="controls"> 
<div class="input-append"> 
    <input tabindex="1" name="url" class="input-large" id="url" type="text" placeholder="http://somewebsite.com" autocapitalize="off"> 
    <button class="btn" type="button" name="attach" id="attach" />Fetch</button> 
</div> 
</div> 

検証エラークラスはjqueryの検証ルールを使用し、他のすべての要素に完璧に動作します。しかし、一見エラーの範囲は入力要素の直後に追加されます。ほとんどの場合、これは絶対に問題ありません。しかし、この入力フィールドのこのインスタンスでは、追加されたボタンを切り離すので、ディスプレイを押し上げます。以下は

は、私は本当にこの1つの要素のエラーメッセージに別のクラスを適用する必要が （前と後）私は、何を意味するかのイメージが、私は方法を見つけ出すことができればbuggeredです。入力フィールドの

errorClass: "help-inline", 
      errorElement: "span", 
      highlight:function(element, errorClass, validClass) { 
       $(element).parents('.control-group').addClass('error'); 
      }, 
      unhighlight: function(element, errorClass, validClass) { 
       $(element).parents('.control-group').removeClass('error'); 
       $(element).parents('.control-group').addClass('success'); 
      } 

エラーイベントは次のとおりです。

url:{ 
required:true 
}, 

とメッセージは次のとおりです。

messages:{ 
url:{ 
    required:"Enter URL beginning with http" 
}, 

Answer 1

あなたはerrorPlacementオプションを使用することができます。この例では

errorPlacement: function (error, element) { 
    error.appendTo(element.parents(".controls:first")); 
} 

、エラー要素は、親DIV .controlsに添付されます。

Answer 2

あなたがerrorPlacementの独自の実装を追加することができますが、与えられたコードは、フォームであなたの通常の入力フィールドでは動作しませんodupontで言ったように。次の実装では、エラー入力はネイティブ入力フィールドと入力追加フィールドの両方で機能します。

errorPlacement: function (error, element) { 
    if (element.parent().is('.input-append')) 
     error.appendTo(element.parents(".controls:first")); 
    else 
     error.insertAfter(element); 
} 

Answer 3

正確には、user579089とodupontが言ったように！

私はちょうどそれを固定して、誰かがそれで捕まってしまった場合にはSOをチェックするために走ってきました。ここに私のコードは次のとおりです。

$("#myform").validate({ 
     highlight: function(label) { 
      $(label).closest('.control-group').addClass('error'); 
     }, 
     errorPlacement: function (error, element) { 
      if (element.parent().hasClass("input-append")){ 
       error.insertAfter(element.parent()); 
      }else{ 
       error.insertAfter(element); 
      } 
     },   
     onkeyup: false, 
     onblur: false, 
     success: function(label) { 
      $(label).closest('.control-group').removeClass('error'); 
     } 
    });