Configurare la visualizzazione html dei messaggi di errore in questo modo?

Question

Sto usando Twitter-Bootstrap e vuole generare il codice HTML corretto per visualizzare la vista errore come lo fa sul sito principale, che è:

il codice HTML per il campo sopra è:

<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> 

Nota: Ho eliminato Please correct the error, <span>, voglio solo il campo di immissione e l'etichetta.

E se dovessi usare la mia pagina di iscrizione a titolo di esempio, il campo email, sarebbe:

<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> 

Che cosa devo fare per farla funzionare come l'ex?

Answer 1

Non reinventare la ruota. Utilizzare simple_form. La versione attuale del gioiello permette di fare quanto segue:

rails generate simple_form:install --bootstrap 

Con questo, è possibile utilizzare le aiutanti simple_form. Genereranno le cose giuste per te.

Answer 2

Rails genera automaticamente un div con la classe field_with_errors quando viene visualizzato un messaggio di errore. Quel div avvolge l'elemento con errore. Al fine di personalizzare, è possibile aggiungere questa linea al application.rb:

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

Questa è l'impostazione predefinita, in modo al fine di ottenere la stessa struttura di Twitter Bootstrap, si potrebbe giocare con esso.

html_tag è un segnaposto per il campo con errori, ad es. <input name="model[attribute]" size="30" type="text" value="">

È possibile racchiuderlo in un altro div e aggiungere una span che recita "Correggi l'errore".

Maggiori informazioni:http://guides.rubyonrails.org/configuring.html - punto 3.9

Answer 3

Ho appena incontrato questo problema, e hanno risolto con una semplice modifica al Bootstrap CSS.

mio solito codice di campo è:

<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> 

Dal momento che sto usando f.label e f.text_field l'etichetta e di ingresso sono entrambi incapsulato con div con la classe field_with_errors (come cita Nicholas), rendendo il codice HTML risultante:

<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> 

Per rendere questi hanno lo stesso aspetto sguardo come lo stile di Sputafuoco <div class="control-group error"> aggiungo alcuni selettori in più in bootstrap.css. Trovo tutti i riferimenti a .control-group.error ... e aggiungi righe duplicate con .control-group .field_with_errors ....Così io alla fine con questo genere di cose:

.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; 
} 

Potrebbe non essere il modo più elegante di farlo per Rails, ma a me è sembrato molto più facile che le gemme più dipendenti o ignorando l'elaborazione degli errori. Sì, dovrai apportare le stesse modifiche ogni volta che aggiorni Bootstrap, ma sono modifiche abbastanza semplici e potresti probabilmente creare un file di patch per farlo automaticamente.