样式表单错误消息-引导程序/轨道 [英] Styling form error message - bootstrap/rails

问题描述

使用bootstrap时，我的rails表单的错误消息看起来很糟糕.有谁知道更好的(漂亮的)错误消息的解决方案?我使用Rails和Bootstrap.

The error messages for my rails form look terrible with bootstrap. Does anyone know a solution for better (nice looking) error messages? I use Rails and Bootstrap.

我的表单(它是一个助手)是这样的:

My form (it's a helper) is like this:

<%= 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 %>

推荐答案

看一下Michael Hartl在railstutorial中是如何做到的.

Take a look at how Michael Hartl does it in railstutorial.

多数民众赞成在使用的CSS:

And thats the used css:

#error_explanation {
  color: #f00;
  ul {
    list-style: none;
    margin: 0 0 18px 0;
  }
}

.field_with_errors {
  @extend .control-group;
  @extend .error;
 }

他在此处描述了所有内容.

如果您还希望每行开头都有小星星，则必须将其包含在表单中:

If you also want the little star at the beginning of every line you have to include it in your form:

     <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>
      ...

这篇关于样式表单错误消息-引导程序/轨道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！