jQuery Giriş-ekinde doğrulama (Twitter Bootstrap)

Question

Bir site için twitter önyükleme kullanıyorum ve jquery.validate kullanıyoruz.

Giriş öğesine eklenmiş düğmeli bir giriş elemanım var. Bu bizim js doğrulamamızda gerekli bir alan.

kodudur:

<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> 

Doğrulama hatası sınıf jquery doğrulama kurallarını kullanır ve diğer her eleman üzerinde mükemmel çalışıyor. Ama görünüşe göre hata için açıklık, çoğu durumda kesinlikle iyi olan giriş elemanından hemen sonra eklenir. Fakat bu örnekte bu giriş alanında, ekrana yukarıdan basar, çünkü eklenmiş düğmeyi çıkarır. Aşağıda

Gerçekten bu bir element için hata iletisine farklı bir sınıf uygulamak gerekir (öncesi ve sonrası) Yani, ne görüntü ama nasıl anlamaya eğer boktandurumda olduğunu. Hata olaydır giriş alanı için

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

ve mesajdır:

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

Answer 1

Sen errorPlacement seçeneğini kullanabilirsiniz. Bu örnekte

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

, hata elemanı üst div .Controls de eklenir.

Answer 2

Odupont tarafından söylediğimiz gibi, kendi uygulamanızı errorPlacement olarak ekleyebilirsiniz, ancak verilen kod formdaki normal giriş alanlarınız için çalışmaz. Aşağıdaki uygulama ile hata yerleşimi hem yerel giriş alanları hem de giriş alanları için çalışacaktır!

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

Answer 3

Tam olarak user579089 ve odupont tarafından dedi!

Bunu yeni düzeltdim ve birisinin takılıp takılmadığını kontrol etmek için SO'ya koştum.

$("#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'); 
     } 
    }); 

: İşte benim kod