इस तरह से त्रुटि संदेश एचटीएमएल दृश्य की स्थापना?

Question

मैं Twitter-Bootstrap उपयोग कर रहा हूँ और त्रुटि दृश्य कैसे यह मुख्य साइट है, जो है पर यह होता है प्रदर्शित करने के लिए सही एचटीएमएल उत्पन्न करना चाहते हैं:

ऊपर क्षेत्र के लिए एचटीएमएल है:

<div class="control-group error"> 
<label for="inputError" class="control-label">Input with error</label> 
    <div class="controls"> 
    <input type="text" id="inputError"> 
    </div> 
</div> 

नोट: मैंने Please correct the error, <span> हटा दिया, मुझे बस इनपुट फ़ील्ड और लेबल चाहिए।

और अगर मैं अपनी प्रवेश एक उदाहरण के रूप पृष्ठ का इस्तेमाल किया गया, email क्षेत्र है, यह होगा:

<div class="control-group"> 
<label for="user_email" class="control-label">Email*</label> 
    <div class="controls"> 
    <input type="email" value="" name="user[email]" id="user_email" class="span3"> 
    </div> 
</div> 

क्या मैं इसे की तरह कार्य करने के लिए मुझे क्या करना होगा भूतपूर्व?

Answer 1

पहिया का पुन: आविष्कार न करें। simple_form का प्रयोग करें। मणि का वर्तमान संस्करण आपको निम्न कार्य करने की अनुमति देता है:

rails generate simple_form:install --bootstrap 

इसके साथ, आप simple_form मददगार का उपयोग कर सकते हैं। वे आपके लिए सही चीजें उत्पन्न करेंगे।

Answer 2

जब कोई त्रुटि संदेश प्रकट होता है तो रेल स्वचालित रूप से कक्षा field_with_errors के साथ एक div उत्पन्न करता है। वह div तत्व के साथ त्रुटि लपेटता है। इसे अनुकूलित करने के लिए, आप application.rb में यह पंक्ति जोड़ सकते हैं: तो आदेश के रूप में ट्विटर बूटस्ट्रैप उसी संरचना प्राप्त करने के लिए, आप इसके साथ खेल सकते हैं

config.action_view.field_error_proc = Proc.new { |html_tag, instance| %Q(<div class="field_with_errors">#{html_tag}</div>).html_safe } 

यह डिफ़ॉल्ट है।

html_tag त्रुटियों वाले फ़ील्ड के लिए प्लेसहोल्डर है, उदा। <input name="model[attribute]" size="30" type="text" value="">

आप इसे किसी अन्य div के भीतर लपेट सकते हैं, और "त्रुटि को सही करें" कहकर एक अवधि भी जोड़ सकते हैं।

और जानकारी:http://guides.rubyonrails.org/configuring.html - आइटम 3.9

Answer 3

मैं सिर्फ इस मुद्दे का सामना करना पड़ा है, और बूटस्ट्रैप सीएसएस के लिए एक सरल संशोधन के साथ यह तय कर दी है।

मेरे सामान्य क्षेत्र कोड है:

<div class="control-group"> 
    <%= f.label :fieldname, t('models.model.fieldname'), :class => "control-label" %> 
    <div class="controls"> 
     <%= f.text_field :fieldname, :class => 'input-large' %> 
    </div> 
</div> 

जब से मैं f.label और f.text_field लेबल और इनपुट उपयोग कर रहा हूँ दोनों (निकोलस उल्लेख के रूप में) field_with_errors वर्ग के साथ divs के साथ समाहित हैं, जिसके परिणामस्वरूप एचटीएमएल बनाने:

<div class="control-group"> 
    <div class="field_with_errors"><label class="control-label" for="model_fieldname">Field name</label></div> 
    <div class="controls"> 
     <div class="field_with_errors"><input class="input-large" id="model_fieldname" name="model[fieldname]" size="30" type="text" value=""></div> 
    </div> 
</div> 

इन बूटस्ट्रैप के <div class="control-group error"> शैली के रूप में मैं bootstrap.css में कुछ अतिरिक्त चयनकर्ताओं को जोड़ने में एक ही नज़र उपस्थिति बनाने के लिए। मुझे .control-group.error ... के सभी संदर्भ मिलते हैं और .control-group .field_with_errors ... के साथ डुप्लिकेट लाइनें जोड़ें।तो मैं बात इस तरह से अंत:

.control-group.error > label, 
.control-group.error .help-block, 
.control-group.error .help-inline, 
.control-group .field_with_errors > label, 
.control-group .field_with_errors .help-block, 
.control-group .field_with_errors .help-inline { 
    color: #b94a48; 
} 

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