Estás en Inicio / Editorial / Ruby on Rails
06.07.2007
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.
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:
William Wong Garay
De origen peruano, es desarrollador web autodidacta, amante del software y filosofía libre y la ética hacker.
Si eres nuevo en Maestros del Web y te agradan nuestras publicaciones, te invitamos a suscribirte a nuestro Feed.
Sindícanos en: Google Reader, Bloglines, My Yahoo o My MSN | ¿Qué es el Feed?
1 comentarios en total.
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
}
Maestros del Web es el punto de encuentro para los entusiastas de la red.
Creative Commons by-nc-sa 3.0 | Política de Privacidad | CMS: Wordpress