ट्विटर बूटस्ट्रैप 3

Question

का उपयोग कर सत्यापन संदेश रखने के लिए सबसे अच्छा अभ्यास क्या है मैं एमवीसी 4 का उपयोग कर रहा हूं लेकिन मुझे लगता है कि यह नया बूटस्ट्रैप 3 संस्करण का उपयोग करने वाले किसी के लिए एक मुद्दा है। चूंकि फॉर्म-कंट्रोल अब चौड़ाई है: डिफ़ॉल्ट रूप से 100%, सत्यापन संदेश रखने के लिए सबसे अच्छा अभ्यास क्या है?

संस्करण 2.x में, इनपुट नियंत्रण के बाद इनपुट-इनलाइन अवधि में सत्यापन संदेश डालने के बाद यह सुनिश्चित करने के लिए सबसे अच्छा काम किया गया कि संदेश नियंत्रण के दाईं ओर रखा गया था।

लेकिन संस्करण 3 में, वे हमेशा नीचे नियंत्रण में आते हैं जिससे सभी नियंत्रण नीचे आ जाते हैं क्योंकि सत्यापन संदेश नियंत्रण में मजबूर होते हैं।

<div class="form-group has-error"> 
    <label for="Label" class="col-lg-2 control-label">Label</label> 
    <div class="col-lg-5"> 
     <input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value=""> 
     <span class="help-inline"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></span> 
    </div> 
</div> 

मैं उन्हें मैन्युअल रूप से इस (नीचे) की तरह एक नया स्तंभ पर स्थापित करने लेकिन सोच अगर वहाँ एक और अधिक स्वीकार्य रास्ता या इस से निपटने का एक कम मैनुअल तरीका था पर विचार किया है।

<div class="form-group has-error"> 
    <label for="Label" class="col-lg-2 control-label">Label</label> 
    <div class="col-lg-5"> 
     <input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value=""> 
    </div> 
    <div class="col-lg-5"> 
     <p class="form-control-static"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></p> 
    </div> 
</div> 

Answer 1

मैं नहीं कहूंगा कि फॉर्म सत्यापन त्रुटियों को प्रस्तुत करने के लिए "सर्वोत्तम प्रथाएं" हैं। यह एक व्यक्तिगत डिजाइन पसंद है।

कितना जे एस आप लिखना चाहते हैं पर निर्भर करता है, तो आप एक छोटे से चालाक हो और एक इनपुट समूह ऐड-ऑन जो इतनी तरह, एक टूलटिप आइकन में एक त्रुटि संदेश रखती है डाल सकता है ...

<div class="input-group"> 
    <input type="text" class="form-control"> 
    <span class="input-group-addon"> 
    <i data-toggle="tooltip" title="Error msg here" data-container="body" class="glyphicon glyphicon-question-sign"></i> 
    </span> 
</div> 

ईमानदारी से, हालांकि , मुझे लगता है कि इनपुट फ़ील्ड के नीचे दिखाई देने वाले संदेश ठीक हैं, जब तक वे पृष्ठ लेआउट को परेशान नहीं करते हैं और जब वे दिखाई देते हैं तो सामग्री को दबाएं। (जो कि एक कंटेनर रखने का मामला है जो ब्लॉक प्रदर्शित करता है और इसमें हार्ड-कोड वाली ऊंचाई होती है।)