Modificando el comportamiento de fieldWithErrors en Rails

Estás en Inicio / Editorial / Ruby on Rails

06.07.2007

Modificando el comportamiento de fieldWithErrors en Rails

Por William Wong Garay | 1,533 Lecturas
Archivado en: Ruby on Rails

En el siguiente artículo encontrarás la solución a la devolución de errores que etiquetan los campos de datos con un DIV utilizando la clase fieldWithErrors en Rails en el diseño de formularios.

Una de las cosas que más me molestaba 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 otro luego del cierre del div de error.

Solucionando el problema

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 de las siguiente forma:

<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>

Espero que estos tips les sirvan al momento de crear formularios utilizando Rails, para comprender mejor sobre los términos expuestos les recomiendo las siguientes lecturas:

Este artículo es una colaboración del autor, publicado originalmente en willywg.com por William Wong Garay.

Califica esta nota:

(No hay votos aún)

Loading ...

Sobre el autor

William Wong Garay
De origen peruano, es desarrollador web autodidacta, amante del software y filosofía libre y la ética hacker.

Comentarios

1 comentarios en total.

Alfredo 06.07.2007 - 07:26 - #

Otra opción sin tener que modificar el código interno de rails es modificar el css de la siguiente manera :
.fieldWithErrors {
display:inline #para que no cree el salto de linea
resto de propiedades
}
.fieldWithErrors input{
las propiedades que quieras
}
.fieldWithErrors select{
las propiedades que quieras
}

Modificando el comportamiento de fieldWithErrors en Rails

Solucionando el problema

Sobre el autor

Comentarios

Editorial

Otras Notas Relacionadas

Boletín