Cómo marcar los campos en los carriles errores de validación

Question

¿Cómo visualizar campo de formulario que destaca para campos que no errores de validación en Rails 3.1? Sé que el andamio genera automáticamente el css y el código del controlador para manejar esto, pero me preguntaba si había una forma de generarlo manualmente. Ya he implementado la pantalla serie de mensajes de error a través de: @ user.errors.full_messages.each ... etc, pero no puedo conseguir los campos para convertirse resaltados en rojo. ¿Algunas ideas?

Gracias.

Answer 1

Asumiendo que tiene un error clase para los campos en el archivo CSS:

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

¿Es esto lo que quieres?

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

Editar:(Acerca de IFS adicionales)

# 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 

Y luego:

# in your view 

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

(es posible que tenga cometer un error en allí - estoy writi en un teléfono, pero se entiende la idea general. Puede codificar esto de varias maneras = infinito, hágalo de la manera que desee ...)

Answer 2

Tenía que hacer esto (resource.errors [field_name] .length> 0) para que funcione:

def field_class (recursos, nombre_campo) si resource.errors [nombre_campo] .length> 0 retorno "custom_error1" .html_safe demás retorno "" .html_safe final final

Answer 3

rieles tienen ahora una buen truco en la manga ... Cuando se produce error, los rieles ponen un div con una clase .field_with_errors alrededor de los campos de error. Entonces, ahora puede orientar esa clase y agregar estilo.

Para centrarse en la contribución que puede hacer

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

este css pondrá una bonita línea roja alrededor del elemento input mientras important! se sobreponen a los estilos existentes.