बूटस्ट्रैप का उपयोग कर के रूप में मार्क त्रुटि

Question

मैंने GWT का सहारा लिए बिना एक अच्छा पेज डिज़ाइन प्राप्त करने के लिए बूटस्ट्रैप का उपयोग करना शुरू कर दिया है (बैकेंड जावा में बनाया गया है)

मेरी लॉगिन स्क्रीन के लिए मैंने इस उदाहरण की प्रतिलिपि बनाई । अब मैं एक त्रुटि चिह्नित करना चाहता हूं, उदाहरण के लिए, कि उपयोगकर्ता नाम खाली रह गया था। तो मैं सोच रहा था कि इसके लिए बूटस्ट्रैप फ्रेमवर्क में क्या प्रक्रिया है। या हो सकता है कि त्रुटि के साथ फॉर्म दिखाने वाले उदाहरण हैं।

मुझे यकीन नहीं है कि अगर विचार इनपुट संदेश के अंदर त्रुटि संदेश को लाल रंग के साथ दिखाने के लिए है, या इसे इनपुट तत्व के नीचे दिखाना है, या शायद एक पॉपअप के साथ?

Comments

चेकआउट jquery मान्य। यह काफी सरल है। बासिस्टेंस.डे

— स्कॉट सिम्पसन

Answer 1

(बूटस्ट्रैप v4, v3 और v3 के उदाहरणों के साथ अद्यतन)

बूटस्ट्रैप के पिछले कुछ प्रमुख संस्करणों के सत्यापन वर्गों के साथ रूपों के उदाहरण।

बूटस्ट्रैप v4

कोडपेन पर लाइव संस्करण देखें

<div class="container">
  <form>
    <div class="form-group row">
      <label for="inputEmail" class="col-sm-2 col-form-label text-success">Email</label>
      <div class="col-sm-7">
        <input type="email" class="form-control is-valid" id="inputEmail" placeholder="Email">
      </div>
    </div>

    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label text-danger">Password</label>
      <div class="col-sm-7">
        <input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Password">
      </div>
      <div class="col-sm-3">
        <small id="passwordHelp" class="text-danger">
          Must be 8-20 characters long.
        </small>      
      </div>
    </div>
  </form>
</div>

बूटस्ट्रैप v3

कोडपेन पर लाइव संस्करण देखें

<form role="form">
  <div class="form-group has-warning">
    <label class="control-label" for="inputWarning">Input with warning</label>
    <input type="text" class="form-control" id="inputWarning">
    <span class="help-block">Something may have gone wrong</span>
  </div>
  <div class="form-group has-error">
    <label class="control-label" for="inputError">Input with error</label>
    <input type="text" class="form-control" id="inputError">
    <span class="help-block">Please correct the error</span>
  </div>
  <div class="form-group has-info">
    <label class="control-label" for="inputError">Input with info</label>
    <input type="text" class="form-control" id="inputError">
    <span class="help-block">Username is taken</span>
  </div>
  <div class="form-group has-success">
    <label class="control-label" for="inputSuccess">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess" />
    <span class="help-block">Woohoo!</span>
  </div>
</form>

बूटस्ट्रैप v2

Jsfiddle पर लाइव संस्करण देखें

.error, .success, .warningऔर .infoवर्गों के साथ जोड़ दिया जाता है .control-group। यह v2 में मानक बूटस्ट्रैप मार्कअप और स्टाइल है। बस उस का पालन करें और आप अच्छे आकार में हैं। यदि आप चाहें तो पॉपअप या "इनलाइन फ्लैश" को जोड़ने के लिए निश्चित रूप से अपनी खुद की शैलियों से परे जा सकते हैं, लेकिन यदि आप बूटस्ट्रैप कन्वेंशन का पालन करते हैं और उन सत्यापन वर्गों को लटकाते हैं, तो .control-groupयह सुसंगत और आसान रहेगा (कम से कम आपके बाद से) जारी रहेगा बूटस्ट्रैप डॉक्स और उदाहरणों का लाभ)

  <form class="form-horizontal">
    <div class="control-group warning">
      <label class="control-label" for="inputWarning">Input with warning</label>
      <div class="controls">
        <input type="text" id="inputWarning">
        <span class="help-inline">Something may have gone wrong</span>
      </div>
    </div>
    <div class="control-group error">
      <label class="control-label" for="inputError">Input with error</label>
      <div class="controls">
        <input type="text" id="inputError">
        <span class="help-inline">Please correct the error</span>
      </div>
    </div>
    <div class="control-group info">
      <label class="control-label" for="inputInfo">Input with info</label>
      <div class="controls">
        <input type="text" id="inputInfo">
        <span class="help-inline">Username is taken</span>
      </div>
    </div>
    <div class="control-group success">
      <label class="control-label" for="inputSuccess">Input with success</label>
      <div class="controls">
        <input type="text" id="inputSuccess">
        <span class="help-inline">Woohoo!</span>
      </div>
    </div>
  </form>

Comments

ध्यान दें कि साथ बूटस्ट्रैप 3 , आप परिवर्तन करने के लिए है control-groupकरने के लिए form-group, जोड़ने form-controlके लिए <input>, तत्वों help-inlineके लिए help-block, और warningकरने के लिए has-warning।

— जिम स्टुअर्ट

@JimStewart आपको धन्यवाद! जान कर अच्छा लगा। जैसे ही मेरे पास मौका होगा मैं अपडेट कर

— दूंगा

इसे बूटस्ट्रैप V3 में बदल दिया गया है,

— वकार आलमगीर

बूटस्ट्रैप 3 में विभिन्न वर्गों का उपयोग किया गया है जैसे कि त्रुटि। Pleaserefer getbootstrap.com/css

— Nish

जैसा कि बूटस्ट्रैप डॉक्यूमेंटेशन में बताया गया है: बूटस्ट्रैप में फॉर्म कंट्रोल पर त्रुटि, चेतावनी और सफलता की स्थिति के लिए सत्यापन शैली शामिल हैं। उपयोग करने के लिए, .has- चेतावनी, .has- त्रुटि, या .has- सफलता को मूल तत्व में जोड़ें। कोई भी .control-label, .form-control, और .help-block उस तत्व के भीतर

— Nejmeddine Jammeli

Answer 2

बूटस्ट्रैप V3 :

आधिकारिक डॉक्टर लिंक 1
आधिकारिक डॉक्टर लिंक 2

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess" />
  <span class="help-block">Woohoo!</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning">
  <span class="help-block">Something may have gone wrong</span>
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError">Input with error</label>
  <input type="text" class="form-control" id="inputError">
  <span class="help-block">Please correct the error</span>
</div>

Comments

V3 उत्तर देना बहुत अच्छा है, लेकिन इसमें त्रुटि संदेश शामिल नहीं हैं।

— डेव

धन्यवाद @Dave लेकिन आपके सुझाव को अन्य लोगों ने अस्वीकार कर दिया, मैंने उत्तर को अपडेट कर दिया।

— वकार आलमगीर

आपका डेमो लिंक आपके द्वारा पोस्ट किए गए कोड को प्रदर्शित नहीं करता है।

— ayjay

@Ayjay को यह इंगित करने के लिए धन्यवाद, दुर्भाग्य से उनके पास हेल्प ब्लॉक्स जोड़ने के लिए अलग-अलग दस्तावेज़ हैं। उत्तर अपडेट किया गया।

— वकार आलमगीर

@fsasvari इस तरह ग्रिड सिस्टम का उपयोग करें: <div class = "form-group has-success"> <span class = "col-sm-12"> <लेबल class = "control-label" के लिए = "inputSuccess1"> इनपुट के साथ सफलता </ लेबल> </ span> <span class = "col-sm-6"> <input type = "text" aria -byby = "helpBlock2" id = "inputSuccess1" class = "form-control" </ / स्पैन> <स्पैन क्लास = "कोल-एसम -6"> <स्पैन आईडी = "हेल्पब्लॉक 2" क्लास = "हेल्प-ब्लॉक"> हेल्प टेक्स्ट का एक ब्लॉक जो एक नई लाइन पर टूटता है। </ span> </ span> < / div>

— वकार आलमगीर

Answer 3

बूटस्ट्रैप मोडल क्लास (v 3.3.7) का उपयोग करते समय निम्न वर्ग का भी उपयोग किया जा सकता है ... हेल्प-इनलाइन और हेल्प-ब्लॉक मोडल में काम नहीं करता है।

<span class="error text-danger">Some Errors related to something</span>

आउटपुट कुछ नीचे जैसा दिखता है:

Answer 4

बूटस्ट्रैप V3:

एक बार जब मैं लार्वा सुविधाओं की खोज कर रहा था तब मुझे इस अद्भुत रूप सत्यापन के बारे में पता चला। बाद में, मैंने ग्लिफ़िकॉन आइकन सुविधाओं में संशोधन किया। अब, यह बहुत अच्छा लग रहा है।

<div class="col-md-12">
<div class="form-group has-error has-feedback">
    <input id="enter email" name="email" type="text" placeholder="Enter email" class="form-control ">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>       
    <span class="help-block"><p>The Email field is required.</p></span>                                        
</div>
</div>
<div class="clearfix"></div>

<div class="col-md-6">
<div class="form-group has-error has-feedback">
    <input id="account_holder_name" name="name" type="text" placeholder="Name" class="form-control ">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>                                            
    <span class="help-block"><p>The Name field is required.</p></span>                                        
</div>
</div>
<div class="col-md-6">
<div class="form-group has-error has-feedback">
 <input id="check_np" name="check_no" type="text" placeholder="Check no" class="form-control ">
 <span class="glyphicon glyphicon-remove form-control-feedback"></span>
<span class="help-block"><p>The Check No. field is required.</p></span>                                       
</div>
</div>

यह है जो ऐसा लग रहा है:

एक बार जब मैंने इसे पूरा कर लिया तो मुझे लगा कि मुझे इसे कोडिग्निटर में भी लागू करना चाहिए। तो यहां कोडस्ट्राइटर -3 सत्यापन बूटस्ट्रैप के साथ है:

नियंत्रक

function addData()
{
$this->load->library('form_validation');
$this->form_validation->set_rules('email','Email','trim|required|valid_email|max_length[128]');
if($this->form_validation->run() == FALSE)
{
//validation fails. Load your view.
$this->loadViews('Load your view','pass your data to view if any');
}
else
{  
 //validation pass. Your code here.
}
}

राय

<div class="col-md-12">
<?php 
 $email_error = (form_error('email') ? 'has-error has-feedback' : '');
 if(!empty($email_error)){
 $emailData = '<span class="help-block">'.form_error('email').'</span>';
 $emailClass = $email_error;
 $emailIcon = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
}
else{
    $emailClass = $emailIcon = $emailData = '';
 } 
 ?>
<div class="form-group <?= $emailClass ?>">
<input id="enter email" name="email" type="text" placeholder="Enter email" class="form-control ">
<?= $emailIcon ?>
<?= $emailData ?>
</div>
</div>

आउटपुट:

Answer 5

सामान्यतया जहाँ त्रुटि होती है, उसके पास त्रुटि दिखाना सर्वोत्तम है। यानी अगर किसी को अपना ईमेल दर्ज करने में कोई त्रुटि है, तो आप ईमेल इनपुट बॉक्स पर प्रकाश डालते हैं।

इस लेख के कुछ अच्छे उदाहरण हैं। http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/

साथ ही ट्विटर बूटस्ट्रैप में कुछ अच्छी स्टाइल है जो इसके साथ मदद करती है (नीचे स्क्रॉल करके सत्यापन स्थिति अनुभाग) http://twitter.github.com/bootstrap/base-css.html#forms

प्रत्येक इनपुट बॉक्स को हाइलाइट करना थोड़ा और अधिक जटिल है, इसलिए आसान तरीका यह होगा कि उपयोगकर्ता ने जो भी गलत किया है, उसके विवरण के साथ बस एक बूटस्ट्रैप अलर्ट डाला जाए। http://twitter.github.com/bootstrap/components.html#alerts

Answer 6

बूटस्ट्रैप v4 उपयोग के लिए:
has-dangerके लिए form-groupआवरण,
form-control-dangerशो आइकन के लिए इनपुट (✖ इनपुट के अंत में प्रदर्शित करेगा) के लिए,
form-control-feedbackसंदेश आवरण को

उदाहरण:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">


<div class="form-group has-danger">
  <input type="text" class="form-control form-control-danger">
  <div class="form-control-feedback">Not valid :(</div>
</div>

Answer 7

त्रुटि पर केवल त्रुटि संदेश दिखाने के लिए CSS का उपयोग कर सकते हैं।

.form-group.has-error .help-block {
    display: block;
}

.form-group .help-block {
    display: none;
}


<div class="form-group has-error">
  <label class="control-label" for="inputError">Input with error</label>
  <input type="text" class="form-control" id="inputError">
  <span class="help-block">Please correct the error</span>
</div>