2012-03-17 6 views
8

Ho iniziato a utilizzare Simple-form e Bootstrap e ho cercato di seguire questo riferimento: Simple form + Bootstrap ma non so cosa sta succedendo perché quando un campo sta fallendo, ecco cosa succede:Rails: Simple form + bootstrap - Quando errori, campi non diventano rossi

No red border in no correct field

Riguardo a questo screenshot ho una domanda:
1) Come si vede, il campo prezzo non è in fase di rosso circondato. Come lo posso fare? Ecco il mio codice per la forma:

<%= simple_form_for @lesson, :html => { :class => 'well' } do |lesson_form| %> 
<% if lesson_form.error_notification %> 
    <div class="alert alert-error fade in"> 
     <a class="close" data-dismiss="alert" href="#">&times;</a> 
     <%= lesson_form.error_notification %> 
    </div> 
<% end %> 
    <%= lesson_form.input :title %> 
    <%= lesson_form.input :category %> 
    <%= lesson_form.input :description %> 
    <%= lesson_form.input :price %> 
    <%= lesson_form.button :submit, :label => 'Create', :class => 'btn btn-primary btn-large' %> 
<% end -%> 

risposta

5

Credo che il codice nel riferimento sia in qualche modo fuorviante e non corretto per quanto riguarda le notifiche di errore.

Cambio:

<% if lesson_form.error_notification %> 
    <div class="alert alert-error fade in"> 
     <a class="close" data-dismiss="alert" href="#">&times;</a> 
     <%= lesson_form.error_notification %> 
    </div> 
<% end %> 

a, semplicemente:

<%= lesson_form.error_notification %> 

Poi, nel config/locals/simple_form.en.yml, cambiare default_message a:

default_message: '<a class="close" data-dismiss="alert">&times;</a>Some errors were found, please take a look:' 

Questo risolverà l'asimmetria nella finestra di avviso di errore (fissando il markup risultante).

Per risolvere il problema con il tuo errore di convalida non visualizzato in rosso, dovrai condividere il markup in modo che possiamo vedere cosa sta succedendo.

0

Guarda il testo accanto al campo prezzo. Semplice per mettere gli errori accanto al campo.

per ripulire i moduli sembrano provare il seguente:

Rimuovere questo, non è necessario con una semplice forma gemma:

<% if lesson_form.error_notification %> 
    <div class="alert alert-error fade in"> 
     <a class="close" data-dismiss="alert" href="#">&times;</a> 
     <%= lesson_form.error_notification %> 
    </div> 
<% end %> 

Cambia la tua :html => { :class => 'well' }-:html => { :class => 'well form-horizontal' }

Questo sarà il layout tua formare meglio e applicare il cst di bootstrap ai campi di errore e al testo.

+0

Voglio quella parte che mi hai chiesto di rimuovere perché voglio mostrare il riquadro rosso in alto (vedi immagine). Se l'ho rimosso, non verrà mostrato alcun errore. Grazie per il suggestiosn per ripulire il modulo, ma vorrei sapere perché non vedo l'errore (vicino al campo) in rosso. –

Problemi correlati