關於輸入追加（Twitter Bootstrap）的jQuery驗證

我爲一個站點使用twitter引導，我們使用jquery.validate。關於輸入追加（Twitter Bootstrap）的jQuery驗證

我有一個輸入元素，附加到輸入元素的按鈕。這是我們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的驗證規則和完美的作品所有其他元素上。但是看起來錯誤的跨度被附在輸入元素之後，在大多數情況下絕對沒問題。但是在這個輸入字段的實例中，它將顯示屏擡起，因爲它會分離附加的按鈕。

下面是我的意思（前後） enter image description here 我真的需要一個不同的類應用到錯誤信息爲這一個元素，形象，但累垮如果我能想出如何。

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

來源

2012-07-06 422

可以使用errorPlacement選項。

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

在該示例中，誤差元件將在父DIV .controls追加。

來源

2012-07-12 06:29:28 odupont

正如odupont所說，您可以添加自己的errorPlacement實現，但給定的代碼不適用於表單中的正常輸入字段。通過以下實現，錯誤放置將適用於本機輸入字段和輸入附加字段！

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

來源

2013-02-09 22:59:05 user579089

正如用戶579089和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'); 
     } 
    });

enter image description here

來源

2013-03-27 21:33:16

關於輸入追加（Twitter Bootstrap）的jQuery驗證

回答

相關問題