So markieren Sie Felder auf Schienen Validierungsfehler

Question

Wie zeigen Sie Feld Hervorhebung für Felder, die Validierungsfehler in Rails 3.1 fehlschlagen? Ich weiß, dass Scaffolding automatisch den CSS- und Controller-Code erzeugt, um damit umzugehen, aber ich habe mich gefragt, ob es eine Möglichkeit gibt, das manuell zu generieren. Ich habe bereits die String-Anzeige von Fehlermeldungen implementiert durch: @ user.errors.full_messages.each ... etc, aber ich kann die Felder nicht rot markiert bekommen. Irgendwelche Ideen?

Danke.

Answer 1

Angenommen, Sie haben einen Fehler Klasse für Felder in der CSS-Datei:

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

Ist das, was Sie wollen?

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

Edit:(über zusätzliche ifs)

# 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 

Und dann:

# in your view 

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

(Ich habe einen Fehler machen kann da - ich bin writi auf einem Telefon - aber Sie bekommen die allgemeine Idee. Sie können dies in einer Anzahl von Möglichkeiten = Unendlichkeit, also tun Sie es so, wie Sie möchten ...)

Answer 2

Ich musste dies tun (resource.errors [field_name] .length> 0), um es zum Arbeiten zu bekommen:

def field_class (resource, field_name) wenn resource.errors [field_name] .length> 0 return "custom_error1" .html_safe sonst return "" .html_safe Ende Ende

Answer 3

Rails jetzt eine haben netter Trick in seinem Ärmel..Wenn ein error auftritt Schienen setzen Sie einen div mit einer Klasse .field_with_errors um die Fehlerfelder. Jetzt können Sie diese Klasse gezielt ansprechen und Styling hinzufügen.

am Eingang fokussieren Sie

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

diese CSS wird eine schöne rote Linie um das input Element gesetzt tun können, während important! alle vorhandenen Arten überschreiben.