7

私はサイトに 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つの要素のエラーメッセージに別のクラスを適用する必要がありますが、方法がわからない場合はバグがあります。

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"
},
4

3 に答える 3

3

odupont が言ったように、errorPlacement の独自の実装を追加できますが、指定されたコードはフォームの通常の入力フィールドでは機能しません。次の実装では、エラー配置はネイティブ入力フィールドと入力追加フィールドの両方で機能します!

errorPlacement: function (error, element) {
   if (element.parent().is('.input-append'))
      error.appendTo(element.parents(".controls:first"));
   else
      error.insertAfter(element);
}
于 2013-02-09T22:59:05.837 に答える
2

errorPlacement オプションを使用できます。

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

この例では、エラー要素が親 div .controlsに追加されます。

于 2012-07-12T06:29:28.483 に答える
1

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');
        } 
    });

ここに画像の説明を入力

于 2013-03-27T21:33:16.930 に答える