ruby-on-rails - validations - rails validate scope

Rails 3: el contenedor "campo con errores" cambia el aspecto de la página. ¿Cómo evitar esto?

Question

Campo de correo electrónico:

<label for="job_client_email">Email: </label>
<input type="email" name="job[client_email]" id="job_client_email">

Se ve como esto:

Pero, si la validación del correo electrónico falla, se convierte en:

<div class="field_with_errors">
<label for="job_client_email">Email: </label>
</div>
<div class="field_with_errors">
<input type="email" value="wrong email" name="job[client_email]" id="job_client_email">
</div>

que se ve así:

¿Cómo podría evitar este cambio de apariencia?

Answer 1

Actualmente uso esta solución, colocada en un inicializador:

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
class_attr_index = html_tag.index ''class="''
if class_attr_index
html_tag.insert class_attr_index+7, ''error ''
else
html_tag.insert html_tag.index(''>''), '' class="error"''
end
end

Esto me permite simplemente agregar un nombre de clase a la etiqueta apropiada, sin crear elementos adicionales.

Answer 2

Además de @phobetron answer, que no funciona cuando tienes otra etiqueta con atributo de clase, como <label for="..."><i class="icon my-icon"></i>My field</label> .

Hice algunos cambios en su solución:

# config/initializers/field_with_error.rb
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
class_attr_index = html_tag.index(''class="'')
first_tag_end_index = html_tag.index(''>'')
if class_attr_index.nil? || first_tag_end_index > class_attr_index
html_tag.insert(class_attr_index + 7, ''error '')
else
html_tag.insert(first_tag_end_index, '' class="error"'')
end
end

Answer 3

Debería anular ActionView::Base.field_error_proc . Actualmente se define como esto en ActionView::Base :

 @@field_error_proc = Proc.new{ |html_tag, instance|
"<div class=/"field_with_errors/">#{html_tag}</div>".html_safe
}

Puede anularlo poniendo esto en la clase de su aplicación dentro de config/application.rb :

config.action_view.field_error_proc = Proc.new { |html_tag, instance|
html_tag
}

Reinicie el servidor de rieles para que este cambio surta efecto.

Answer 4

El código adicional está siendo agregado por ActionView::Base.field_error_proc . Si no está utilizando field_with_errors para field_with_errors estilo a su formulario, puede anularlo en application.rb :

config.action_view.field_error_proc = Proc.new { |html_tag, instance| html_tag.html_safe }

Alternativamente, puede cambiarlo a algo que se adapte a su UI:

config.action_view.field_error_proc = Proc.new { |html_tag, instance| "<span class=''field_with_errors''>#{html_tag}</span>".html_safe }

Answer 5

Esta es mi solución basada en la respuesta de @ Phobetron. Al colocar este código en application.rb , sus etiquetas <p> y <span> generadas por las llamadas form.error :p correspondientes recibirán la etiqueta fields_with_errors css. El resto recibirá la clase CSS de error .

config.action_view.field_error_proc = Proc.new { |html_tag, instance|
class_attr_index = html_tag.index ''class="''
if class_attr_index
# target only p''s and span''s with class error already there
error_class = if html_tag =~ /^<(p|span).*error/
''field_with_errors ''
else
''error ''
end
html_tag.insert class_attr_index + 7, error_class
else
html_tag.insert html_tag.index(''>''), '' class="error"''
end
}

De esta forma encontré el más flexible y discreto de todos los anteriores a la respuesta del estilo en mis formularios.

Answer 6

Estoy trabajando con Rails 5 y Materialize-Sass y estoy recibiendo algunos problemas con el comportamiento predeterminado de Rails para tratar validaciones de campo fallidas como en la imagen de abajo y fue debido a la div adicional agregada a los campos de entrada donde falló la validación.

Trabajar con @Phobetron responde y modifica la respuesta de Hugo Demiglio también. Hice algunos ajustes a esos bloques de código y obtengo algo que funciona bien en los siguientes casos:

• Si tanto la input como la label tienen su propio atributo de class cualquier lugar
  • <input type="my-field" class="control">
  • <label class="active" for="...">My field</label>
• Si las label input o etiquetas no tienen un atributo de class
  • <input type="my-field">
  • <label for="...">My field</label>
• si la etiqueta tiene otra etiqueta adentro con el class attribute
  • <label for="..."><i class="icon-name"></i>My field</label>

En todos esos casos, la clase de error se agregará a las clases existentes en el atributo de class si existe o se creará si no está presente en la etiqueta o etiquetas de entrada .

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
class_attr_index = html_tag.index(''class="'')
first_tag_end_index = html_tag.index(''>'')
# Just to inspect variables in the console
puts ''😎 '' * 50
pp(html_tag)
pp(class_attr_index)
pp(first_tag_end_index)
if class_attr_index.nil? || class_attr_index > first_tag_end_index
html_tag.insert(first_tag_end_index, '' class="error"'')
else
html_tag.insert(class_attr_index + 7, ''error '')
end
# Just to see resulting tag in the console
pp(html_tag)
end

Espero que pueda ser útil para alguien con las mismas condiciones que yo.

Answer 7

Hice una opción para desactivar esta cosa terrible para algunos objetos

# config/initializers/field_error_proc.rb
module ActiveModel::Conversion
attr_accessor :skip_field_error_wrapper
end
ActionView::Base.field_error_proc = Proc.new {|html_tag, instance|
if instance.object && instance.object.skip_field_error_wrapper
html_tag.html_safe
else
"<div class=/"field_with_errors/">#{html_tag}</div>".html_safe
end
}

Entonces puede usarlo así:

@user.skip_field_error_wrapper = true
form_for(@user) do |f|
...
end

Answer 8

La diferencia visual que está viendo está sucediendo porque el elemento div es un elemento de bloque. Agregue este estilo a su archivo CSS para que se comporte como un elemento en línea:

.field_with_errors { display: inline; }

Answer 9

Si es solo por motivos de estilo (no le importa el div ), puede agregar esto a su CSS:

div.field_with_errors {
display: inline;
}

El div actuará como un span y no interferirá con su diseño (ya que div es un elemento de bloque - display: block; - de forma predeterminada, causará una nueva línea después de que se cierre; span está en inline , por lo que no )

Answer 10

Si por alguna razón todavía trabajas en Rails 2 (como yo), echa un vistazo a la publicación SO here .

Ofrece una secuencia de comandos para poner en inicializadores.

Answer 11

Si solo se trata de problemas de diseño, podemos sobreescribir "field_with_errors". Pero como eso podría afectar a otros formularios en nuestra aplicación, es mejor sobrescribir la clase "field_with_errors" con ese formulario solamente.

Teniendo en cuenta ''parent_class'' es una de las clases padre para el campo de error del formulario (ya sea la clase del formulario o la clase de cualquiera del elemento padre para el campo de error), luego

 .parent_class .field_with_errors {
display: inline;
}

Solucionará el problema y no alterará ninguna otra forma en nuestra aplicación.

O

Si necesitamos anular el estilo de "campo_con_errores" para toda la aplicación, entonces como dijo @dontangg,

.field_with_errors { display: inline; }

hará la corrección. Espero eso ayude :)

Answer 12

Una cosa que hay que tener en cuenta (como descubrí trabajando en esto hoy) es que si flotas la etiqueta o los campos de entrada (estoy flotando todos los campos de entrada a la derecha), el css se romperá incluso si anulas ActionView :: Base.field_error_proc.

Una alternativa es bajar un nivel más profundo en el formato CSS de esta manera:

.field_with_errors label {
padding: 2px;
background-color: red;
}
.field_with_errors input[type="text"] {
padding: 3px 2px;
border: 2px solid red;
}