इनपुट-एपेंड (ट्विटर बूटस्ट्रैप) पर jQuery सत्यापन

Question

मैं साइट के लिए ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं, और हम jquery.validate का उपयोग करते हैं।

मेरे पास इनपुट तत्व में संलग्न बटन के साथ एक इनपुट तत्व है। यह हमारे जेएस सत्यापन के भीतर एक आवश्यक फ़ील्ड है।

कोड है:

<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 सत्यापन नियमों का उपयोग करता है और हर दूसरे तत्व पर पूरी तरह से काम करता है। लेकिन प्रतीत होता है कि त्रुटि के लिए अवधि इनपुट तत्व के ठीक बाद जोड़ दी गई है, जो ज्यादातर मामलों में बिल्कुल ठीक है। लेकिन इस उदाहरण में इस इनपुट फ़ील्ड पर, यह डिस्प्ले को कॉक्स करता है, क्योंकि यह संलग्न बटन को अलग करता है।

नीचे मैं क्या मतलब है (पहले और बाद में) मैं वास्तव में यह एक तत्व के लिए त्रुटि संदेश के लिए एक अलग वर्ग को लागू करने की जरूरत है, की छवि लेकिन 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: function (error, element) { 
    if (element.parent().is('.input-append')) 
     error.appendTo(element.parents(".controls:first")); 
    else 
     error.insertAfter(element); 
} 

Answer 3

उपयोगकर्ता 579089 और odupont द्वारा बिल्कुल कहा गया है!

मैंने अभी यह तय कर लिया है और यह जांचने के लिए एसओ में भाग गया है कि कोई इसके साथ फंस गया है या नहीं।

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

: यहाँ मेरी कोड है