ruby on rails - Personalizando field_with_errors
ruby-on-rails ruby-on-rails-3 (13)
A continuación es lo que se me ocurrió.
Agregué esto a mi css
.field_with_errors {
display:inline;
margin:0px;
padding:0px;
}
Agregué esto al <head>
$(function(){
$(''.field_with_errors'').addClass(''control-group error'');
});
¿Hay una manera de decirle a Rails que no cree div.field_with_errors tanto en la etiqueta como en el campo real, sino que crea un div.error alrededor de ambas?
Por ejemplo, un fragmento de mi vista con el formulario (escrito en HAML)
= form_for @user do |f|
%div.clearfix
= f.label :name
%div.input
= f.text_field :name
Quiero que, en caso de error, la raíz div sea div.clearfix.error y evite ese field_with_errors . ¿Puedo hacerlo?
Como otra opción, puedo hacer formtastic para crear elementos de Bootstrap -styled, sin clases css y html de formtastic, pero con las de bootstrap. ¿Puedo hacer algo con campos de error en el caso de usar formtastic?
Bootstrap 3 y Rails 4 - Tuve que hacer lo siguiente:
.alert-error{
color: #f00;
@extend .alert;
@extend .alert-danger;
}
#error_explanation
{ ul
{
list-style: none;
margin: 0 0 18px 0;
color: red
}
}
.field_with_errors
{
input {
border: 2px solid red;
}
}
Con bootstrap 3.0, la clase es has-error . La solución de @ oded debería ser:
$(''.field_with_errors'').parent().addClass(''has-error'');
Cree config/initializers/field_with_errors.rb con:
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
"<div class=/"error/">#{html_tag}</div>".html_safe
end
Esto cambiará .field-with-errors por .error .
Sin embargo, el mayor problema que he encontrado con "Rails-way" es que envuelve el elemento con un nuevo div lugar de simplemente agregar la clase al elemento en sí. Prefiero esto:
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
parts = html_tag.split(''>'', 2)
parts[0] += '' class="field_with_errors">''
(parts[0] + parts[1]).html_safe
end
En realidad es más irritante de lo que piensas.
Terminé creando mis propios ayudantes de etiquetas (que también necesitaba para otros propósitos), aunque empecé con solo anular ActionView::Base.field_error_proc . (Que es una historia en sí misma ya que pasa en una cadena, no en realidad algo con lo que puedes jugar de manera confiable :(
Pero comience con eso y vea si hace lo suficiente por usted, de lo contrario, prepárese para cavar y ajustar.
Esto es lo que funciona con Bootstrap 3, cuando se usa la gema https://github.com/anjlab/bootstrap-rails .
.field_with_errors {
@include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
}
Esto es lo que hice con bootstrap 3.0.3 y rieles 4.0.2:
/* Rails scaffold style compatibility */
#error_explanation {
@extend .alert;
@extend .alert-danger;
width: inherit;
}
.field_with_errors {
@extend .has-error;
display: inherit;
padding: inherit;
background-color: inherit;
}
Hay una solución muy simple para todo este lío. Está basado en javascript pero resolvió mis problemas; solo agregue esto (cuando use el formulario horizontal):
$(document).ready(function() {
$(''.field_with_errors'').parent().addClass(''error'');
});
Básicamente toma el comportamiento predeterminado de Rails y lo transforma en el Bootstrap. Añadiendo la clase de error al grupo de control-group que pertenece. Sin css y sin anular el valor predeterminado field_error_proc .
La respuesta de @flowdelic parece ser la solución más simple. Sin embargo, los nombres son incorrectos. Esto puede deberse a la versión de Rails / Bootstrap, pero esto funciona para mí.
/* Rails scaffold style compatibility */
#error_explanation {
@extend .alert;
@extend .alert-error;
@extend .alert-block; /* optional */
}
.field_with_errors {
@extend .control-group.error
}
No tengo suficientes puntos para comentar, así que responderé aquí:
Para agregar a la respuesta por @iosctr, el css comenzó a funcionar solo después de que agregué a mi archivo bootstrap_and_overrides.css.scss :
@import "bootstrap";
body { padding-top: 40px; }
@import "bootstrap-responsive";
#error_explanation {
@extend .alert;
@extend .alert-error;
@extend .alert-block;
}
.field_with_errors {
@extend .control-group.error;
}
Puede utilizar la gema Formtastic Bootstrap para crear un marcado de Twitter Bootstrap-friendly con Formtastic.
Si alguien usa MENOS:
en bootstrap_and_overrides.css.less puede agregar:
#error_explanation {
.alert();
.alert-error();
.alert-block();
}
.field_with_errors {
.control-group.error();
}
que es la versión MENOS del ejemplo de sass mostrado.
Si está utilizando SASS con Twitter Bootstrap, puede usar la directiva @extend para aplicar los estilos de Twitter Bootstrap a las clases de CSS generadas por Rails. (Busque en GitHub, hay varios puertos Bootstrap / SASS disponibles).
Por ejemplo:
@import "bootstrap";
/* Rails scaffold style compatibility */
.errorExplanation {
@extend .alert-message;
@extend .block-message;
@extend .error;
}
.fieldWithErrors {
// pulled from div.clearfix.error
@include formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
}
Tenga en cuenta que el estilo de "Bootstrap" de Twitter para "error" se adjunta a un selector div.clearfix, que nos impide simplemente hacer esto:
.fieldWithErrors {
@extend .error;
}
Así que, en lugar de eso, copié / pegué el código de la definición de Bootstrap para div.clearfix.error en mi selector de campos .fieldWithErrors.