ruby-on-rails-3 - not - twitter bootstrap rails

Mensaje de error de formulario de estilo-bootstrap/rails

Question

Los mensajes de error para mi formulario de rieles se parecen a la mierda con bootstrap. ¿Alguien sabe una solución para los mensajes de error mejorados? Yo uso Rails y Bootstrap.

Mi formulario (es un ayudante) es así:

<%= form_for(@user) do |f| %>
<% if @user.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>
<ul>
<% @user.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="form-inline">
<%= f.text_field :email, class:''input-large'', placeholder:''Test'' %>
<!-- </div>
<div class="actions"> -->
<%= f.submit class:''btn btn-large btn-success'' %>
</div>
<% end %>

Answer 1

Bootstrap 4 Alpha 6

Copié el Bootstrap CSS compilado de

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css

.has-danger , copié todas las clases, hice una búsqueda y reemplazo en .has-danger para .field_with_errors , y también .field_with_errors label

.field_with_errors label,
.field_with_errors .form-control-feedback,
.field_with_errors .form-control-label,
.field_with_errors .col-form-label,
.field_with_errors .form-check-label,
.field_with_errors .custom-control {
color: #d9534f;
}
.field_with_errors .form-control {
border-color: #d9534f;
}
.field_with_errors .input-group-addon {
color: #d9534f;
border-color: #d9534f;
background-color: #fdf7f7;
}
.field_with_errors .form-control-danger {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=''http://www.w3.org/2000/svg'' fill=''%23d9534f'' viewBox=''-2 -2 7 7''%3E%3Cpath stroke=''%23d9534f'' d=''M0 0l3 3m0-3L0 3''/%3E%3Ccircle r=''.5''/%3E%3Ccircle cx=''3'' r=''.5''/%3E%3Ccircle cy=''3'' r=''.5''/%3E%3Ccircle cx=''3'' cy=''3'' r=''.5''/%3E%3C/svg%3E");
}

No pude hacer que los complementos de los grupos de entrada se mostraran correctamente, ya que envuelve la entrada con un <div> .

Docs: https://v4-alpha.getbootstrap.com/components/forms/#validation

Honestamente, algunas de estas clases no se usan porque Rails no tiene una forma obvia de establecer clases en los campos de error.

Para la lista de errores, acabo de usar esta clase simple

#error_explanation {
color: red;
}

Answer 2

Eche un vistazo a cómo Michael Hartl lo hace en railstutorial.

Y ese es el css utilizado:

#error_explanation {
color: #f00;
ul {
list-style: none;
margin: 0 0 18px 0;
}
}
.field_with_errors {
@extend .control-group;
@extend .error;
}

Él describe todo here .

Si también quieres la pequeña estrella al comienzo de cada línea, debes incluirla en tu formulario:

 <div id="error_explanation">
<h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>
<ul>
<% @user.errors.full_messages.each do |msg| %>
<li> * <%= msg %></li> <--- insert here
<% end %>
</ul>
</div>
...

Answer 3

He implementado la herramienta de ayuda de Rabbott en Rails 5 y Bootstrap 4:

def errors_for(object)
if object.errors.any?
content_tag(:div, class: ''card text-white bg-danger mb-3'') do
concat(content_tag(:div, class: ''card-header'') do
concat(content_tag(:h4) do
concat "#{pluralize(object.errors.count, ''error'')} prohibited this #{object.class.name.downcase} from being saved:"
end)
end)
concat(content_tag(:div, class: ''card-body'') do
concat(content_tag(:ul) do
object.errors.full_messages.each do |msg|
concat content_tag(:li, msg)
end
end)
end)
end
end
end

Y se parece a esto:

Answer 4

Me di cuenta un poco tarde, pero me encontré con esto hoy con Rails 4 y Bootstrap 3, terminé haciendo un ayudante de visualización para mostrar errores usando un panel:

Rieles 4 / Bootstrap 3

def errors_for(object)
if object.errors.any?
content_tag(:div, class: "panel panel-danger") do
concat(content_tag(:div, class: "panel-heading") do
concat(content_tag(:h4, class: "panel-title") do
concat "#{pluralize(object.errors.count, "error")} prohibited this #{object.class.name.downcase} from being saved:"
end)
end)
concat(content_tag(:div, class: "panel-body") do
concat(content_tag(:ul) do
object.errors.full_messages.each do |msg|
concat content_tag(:li, msg)
end
end)
end)
end
end
end

Rieles 4 / Bootstrap 4 Beta

def errors_for(object)
if object.errors.any?
content_tag(:div, class: "card border-danger") do
concat(content_tag(:div, class: "card-header bg-danger text-white") do
concat "#{pluralize(object.errors.count, "error")} prohibited this #{object.class.name.downcase} from being saved:"
end)
concat(content_tag(:div, class: "card-body") do
concat(content_tag(:ul, class: ''mb-0'') do
object.errors.full_messages.each do |msg|
concat content_tag(:li, msg)
end
end)
end)
end
end
end

Rails 4 / Bootstrap 4 Beta List Grupo Variación

def errors_for(object)
if object.errors.any?
content_tag(:div, class: "card border-danger") do
concat(content_tag(:div, class: "card-header bg-danger text-white") do
concat "#{pluralize(object.errors.count, "error")} prohibited this #{object.class.name.downcase} from being saved:"
end)
concat(content_tag(:ul, class: ''mb-0 list-group list-group-flush'') do
object.errors.full_messages.each do |msg|
concat content_tag(:li, msg, class: ''list-group-item'')
end
end)
end
end
end

Lo coloqué en application_helper y lo llamé en mis vistas de formulario

<%= errors_for(@user) %>

Tal vez alguien se tope con esto y lo encuentre útil.

Answer 5

Por si acaso alguien se tropieza aquí y está usando Bootstrap 4 alpha con rails 5 y bootstrap_form_for gem . Yo suelo:

<div class="form-group">
<%= f.alert_message "Please fix the errors below." %>
</div>

que se ve muy bien

Answer 6

Tal vez una más simple es la búsqueda de identificadores y clases en el propio formulario. Funciona para cualquier combo.

Por defecto, estas son las líneas incluidas en el andamio para organizar los mensajes de error. Puedes hacer con ellos lo que quieras. Solo tienes que extenderlos en tu archivo css.scss:

.field_with_errors {
padding: 2px;
background-color: red;
display: table;
}
#error_explanation {
width: 450px;
border: 2px solid red;
padding: 7px 7px 0;
margin-bottom: 20px;
background-color: #f0f0f0;
}
#error_explanation h2 {
text-align: left;
font-weight: bold;
padding: 5px 5px 5px 15px;
font-size: 12px;
margin: -7px -7px 0;
background-color: #c00;
color: #fff;
}
#error_explanation ul li {
font-size: 12px;
list-style: square;
}

En caso de que algo no funcione, compruebe el navegador en modo desarrollador. Allí deberías poder encontrar todos los rieles html y css que está creando ...