Modificando el comportamiento de "fieldWithErrors" en Rails
Posted by willywg, Sun Apr 22 12:56:00 UTC 2007
Una de las cosas que más me ofuscaban de trabajar con formularios en Rails era la devolución de errores que etiquetaba los campos de datos con un DIV usando un class=”fieldWithErrors”.
Digamos que si teníamos en nuestra vista lo siguiente:
<p><label for="contacto_nombre">Nombre completo:</label>
<%= text_field 'contacto', 'nombre', :maxlength => 40 %> *</p>
Y al procesar el formulario ocurría un error en este campo, Rails generaba como salida lo siguiente:
<p><label for="contacto_nombre">Nombre completo:</label></p>
<div class="fieldWithErrors"><input id="contacto_nombre" maxlength="30" name="contacto[nombre]" size="30" value="" type="text"></div> *
Como podrán apreciar, cerraba el párrafo (p) luego de la etiqueta label, y a continuación generaba el div que albergaba al campo con errores. Esto originaba dos saltos de línea que malograba el maquetado inicial del formulario: uno luego del cierre de label y luego del cierre del div de error.
La solución para modificar este comportamiento lo encontré googleando en una lista de correo de Rails y le hice algunas modificaciones para hacerlo más flexible para el uso de css:
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
msg = instance.error_message
error_class = 'error_field'
if html_tag =~ /<(input|textarea|select)[^>]+class=/
class_attribute = html_tag =~ /class=['"]/
html_tag.insert(class_attribute + 7, "#{error_class} ")
elsif html_tag =~ /<(input|textarea|select)/
first_whitespace = html_tag =~ /\s/
html_tag[first_whitespace] = " class='#{error_class}' "
end
html_tag
end
Este trozo de código deben agregarlo al archivo /config/enviroment.rb. Lo que hace es comprobar si el campo con error ya tiene un atributo class, si es así le agrega al atributo ya existente otro valor con el nombre error_field, sino existe crea class=’error_field’. Para el ejemplo, la salida devuelta nos daría un marcado más flexible, limpio y fácil de manejar con css:
<p><label for="contacto_nombre">Nombre completo:</label>
<input class="error_field" id="contacto_nombre" maxlength="30" name="contacto[nombre]" size="30" value="" type="text"> * </p>
