Come evidenziare i campi sugli errori di convalida delle rotaie

Question

Come si visualizza l'evidenziazione dei campi modulo per i campi che non superano gli errori di convalida in Rails 3.1? So che lo scaffolding genera automaticamente il codice css e controller per gestirlo, ma mi chiedevo se esistesse un modo per generarlo manualmente. Ho già implementato la visualizzazione delle stringhe dei messaggi di errore tramite: @ user.errors.full_messages.each ... ecc., Ma non riesco a far evidenziare i campi in rosso. Qualche idea?

Grazie.

Answer 1

Supponendo di avere un errore di classe per i campi nel file CSS:

<% if @user.errors[:name] %> 
    <%= f.label :name, :class => "error" %> 
<% else %> 
    <%= f.label :name %> 
<% end %> 

E 'questo quello che vuoi?

Extra: here's a section about customizing default ActiveRecord validations CSS.

Edit:(circa IFS aggiuntivi)

# app/helpers/application_helper.rb 

def field_class(resource, field_name) 
    if resource.errors[field_name] 
    return "error".html_safe 
    else 
    return "".html_safe 
    end 
end 

E poi:

# in your view 

<%= f.label :name, :class => field_class(@user, :name) %> 
<%= f.label :password, :class => field_class(@user, :password) %> 
[...] 

(forse ho commesso un errore in lì - Sono writi su un telefono - ma hai un'idea generale. Puoi codificarlo in numero di modi = infinito, quindi fallo nel modo che preferisci ...)

Answer 2

Ho dovuto fare questo (resource.errors [nome_campo] .lunga> 0) per farlo funzionare:

def field_class (risorse, nome_campo) se resource.errors [nome_campo] .length> 0 ritorno "custom_error1" .html_safe altro ritorno "" .html_safe fine fine

Answer 3

Rails ora hanno una bel trucco nella sua manica..Quando un error si verifica rotaie mettere un div con una classe .field_with_errors intorno ai campi di errore. Quindi ora puoi scegliere come target quella classe e aggiungere uno stile.

Per mettere a fuoco l'ingresso che si può fare

.field_with_errors input{ 
    border: 1px solid red !important; 
} 

questo css metterà una bella linea rossa attorno all'elemento input mentre important! sovrascriverà tutti gli stili esistenti.