Maestros del Web

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:

• Introducción a Ruby on Rails
• Ruby on Rails vs PHP: una falsa comparación
• Los programadores de PHP están interesados en migrar a Rails

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