बूटस्ट्रैप 3 टैब और एचटीएमएल 5 फॉर्म सत्यापन

Question

एक छिपे हुए टैब पर मौजूद तत्व को सत्यापित करने की क्लासिक समस्या। मैंने जटिल कामकाज के साथ सौ पद पढ़े हैं। क्या किसी के पास एक सामान्य, अधिक सुरुचिपूर्ण समाधान है जो सामान्य मामले में काम करता है? यानी प्रत्येक रूप में विशेष रूप से कोडित नहीं किया गया है?

एचटीएमएल 5 एक सुरुचिपूर्ण समाधान का वादा करता है। लेकिन टैब्स यह कहीं के ऊपर ...

धन्यवाद

अधिक ..? बूटस्ट्रैप उदाहरणों से। यदि आपके पास "आवश्यक" (HTML5 सत्यापन) चिह्नित फ़ील्ड हैं, तो सत्यापन गैर-सक्रिय (छुपा) टैब के लिए काम नहीं करेगा। और मेरा मानना ​​है कि अन्य जावास्क्रिप्ट सत्यापन तकनीकों टैब के साथ भी असफल हो जाते हैं।

मुझे आशा है कि किसी के पास समाधान के लिए एक सामान्य तकनीक है जो प्रत्येक पृष्ठ पर कोड में विटिंग की आवश्यकता नहीं है। एचटीएमएल 5 सत्यापन अच्छा और साफ है - जब तक आप टैब जोड़ते हैं ...

यह सबमिट नहीं करेगा। लेकिन यह या तो एक त्रुटि एचटीएमएल 5 नई सुविधा नहीं देंगे ...

<!-- Nav tabs --> 
<ul class="nav nav-tabs"> 
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li> 
    <li><a href="#profile" data-toggle="tab">Profile</a></li> 
    <li><a href="#messages" data-toggle="tab">Messages</a></li> 
    <li><a href="#settings" data-toggle="tab">Settings</a></li> 
</ul> 

<!-- Tab panes --> 
<div class="tab-content"> 
    <div class="tab-pane active" id="home">...</div> 
    <div class="tab-pane" id="profile">... 
    <input type="text" name="name" required> 
    </div> 
    <div class="tab-pane" id="messages">... 
    <input type="text" name="address" required> 
    </div> 
    <div class="tab-pane" id="settings">...</div> 
</div> 

Answer 1

मैंने एचटीएमएल 5 सत्यापन पर छोड़ दिया ... शायद भविष्य में। लेकिन अभी भी कुछ समस्याएं हैं।

अब मुझे "बूटस्ट्रैप वैलिडेटेटर" (http://bootstrapvalidator.com/) का उपयोग करके बहुत अच्छी किस्मत है। यह टैब के साथ ठीक काम करता है, एचटीएमएल 5 सत्यापन टैग का जवाब देता है, और इसमें बहुत से वैधकर्ता हैं। अभी भी बहुत नया है लेकिन ऐसा लगता है कि सक्रिय रूप से काम किया जा रहा है। सब ठीक चल रहा हैं।

Answer 2

आप उपयोग कर सकते हैं

इनपुट फार्म गुण

प्रपत्र विशेषता एक या अधिक रूपों को निर्दिष्ट एक तत्व अंतर्गत आता है सेवा मेरे।

उदाहरण http://www.w3schools.com/

एक इनपुट क्षेत्र HTML प्रपत्र के बाहर स्थित (लेकिन अभी भी रूप का एक हिस्सा) के अनुसार:

<form action="demo_form.asp" id="form1"> 
    First name: <input type="text" name="fname"><br> 
    <input type="submit" value="Submit"> 
</form> 

Last name: <input type="text" name="lname" form="form1"> 

अधिक जानकारी के लिए जानकारी इस W3School

देखें

Answer 3

सबसे कष्टप्रद समस्या, कोई क्रोम (या कोई अन्य बी rowser इस मुद्दे है) कुछ भी करने से पहले अपने दृश्य होगा, यदि जाँच करेगा, लेकिन ..

$(document).on('shown.bs.tab','a[data-toggle="tab"]',function(e){ 
    $(':input[required]:hidden').removeAttr('required').addClass('wasrequired'); 
    $('.wasrequired:visible').removeClass('wasrequired').prop('required', 'required'); 
}) 

अच्छा 'ol इंटरनेट एक्सप्लोरर दिनों की तरह एक एक ब्राउज़र समस्या के हैक चाहिए मैं कुछ भी संशोधित करने के लिए नहीं करना चाहता था मेरे कोड में, लेकिन एक और समाधान एक वर्ग = 'आवश्यक' जोड़ने के लिए है, इसलिए हमें एक टीएमपी समाधान के रूप में 'अपर्याप्त' का उपयोग करने की आवश्यकता नहीं है।

मुझे चयनकर्ताओं में अपनी फॉर्म क्लास, .form-AJAX भी जोड़ना पड़ा क्योंकि मेरा फॉर्म टैब के दायरे से बाहर था।