Impostazione di errore di visualizzazione dei messaggi HTML in questo modo?

Question

Twitter Bootstrap- e vogliono generare la correttezza del codice HTML per visualizzare la vista errore come lo fa sul sito principale, che è:

Il codice HTML per il campo di cui 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 inserimento 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 farlo funzionare come il primo?

Answer 1

Do non re-inventare la ruota. Usa 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. Essi generano le cose giuste per voi.

Answer 2

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

La mia solita codice di campo è il seguente:

<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 <div class="control-group error"> di Sputafuoco aggiungo alcuni selettori in più in bootstrap.css. Trovo tutti i riferimenti a .control-group.error ... e aggiungi le linee 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 sembrava molto più facile che le gemme più dipendenti o ignorando l'elaborazione degli errori. Sì, si dovrà apportare le stesse modifiche ogni volta che si aggiorna Bootstrap, ma sono abbastanza semplici modifiche, e, probabilmente, si potrebbe fare un file di patch per farlo automaticamente.

Answer 3

Rails genera automaticamente un div con il field_with_errors classe quando viene visualizzato un messaggio di errore. Che div avvolge l'elemento con l'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 esempio <input name="model[attribute]" size="30" type="text" value="">

Si potrebbe avvolgere questo all'interno di un altro div, e anche aggiungere un arco che dice "Si prega di correggere l'errore".

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