如何使用 twitter bootstrap by rails framework 显示漂亮的错误消息？

Posted 2023-02-23

【中文标题】如何使用 twitter bootstrap by rails framework 显示漂亮的错误消息？

【英文标题】：How to show beautiful error messages with twitter bootstrap by rails framework?

【发布时间】：2015-01-19 02:50:20

【问题描述】：

如果我使用 Rails 4 进行测试：

rails g scaffold post title description:text

这里会生成表单源：

<%= form_for(@post) do |f| %>
  <% if @post.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
      <% @post.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :description %><br>
    <%= f.text_area :description %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

还有scaffold.css.scsss：

body 
  background-color: #fff;
  color: #333;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;


p, ol, ul, td 
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;


pre 
  background-color: #eee;
  padding: 10px;
  font-size: 11px;


a 
  color: #000;
  &:visited 
    color: #666;
  
  &:hover 
    color: #fff;
    background-color: #000;
  


div 
  &.field, &.actions 
    margin-bottom: 10px;
  


#notice 
  color: green;


.field_with_errors 
  padding: 2px;
  background-color: red;
  display: table;


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

结果是：

但是如果我想使用twitter bootstrap的表单错误类，比如：

如何以正确的方式做到这一点？有不错的宝石出口吗？

确实，我想要这种风格：

【问题讨论】：

是的，您可以使用twitter-bootstrap-rails 为您的表单应用自定义引导程序检查此链接：github.com/seyhunak/twitter-bootstrap-rails

@Choco 非常感谢。我知道那颗宝石。我不知道如何检查错误并使用错误样式的html源。

请参考这些链接github.com/bootstrap-ruby/rails-bootstrap-forms和***.com/questions/15155890/…他们可能会帮助你

@Choco 很好！我想这就是我想要的。非常感谢！如果你能写一个答案，我会接受它:)

我发布了我的答案谢谢

【参考方案1】：

您可以使用rails-bootstrap-forms gem，我们可以通过将自定义引导样式应用于我们的表单来自定义 Rails 表单。

宝石文件：

gem 'bootstrap_form'

application.css.scss：

 *= require rails_bootstrap_forms

表格

<%= bootstrap_form_for(@post) do |f| %>
  <% if @post.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
      <% @post.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :description %><br>
    <%= f.text_area :description %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

请参考这些链接以获得更多帮助：

https://github.com/bootstrap-ruby/rails-bootstrap-forms

Styling form error message - bootstrap/rails

希望对你有帮助。

---

表格应该是：

<%= bootstrap_form_for(@question) do |f| %>
  <%= f.alert_message "Please input values." %>
  <%= f.text_field :title %>
  <%= f.text_field :description %>
  <%= f.submit %>
<% end %>

【讨论】：

这个 rails-bootstrap-forms 能否与 twitter-bootstrap-rails 配合得很好？我已经有 twitter-bootstrap-rails，我可以将 rails-bootstrap-forms 放到同一个应用程序中进行表单样式设置吗？

@anand 我认为它会起作用，因为这两种宝石是不同的并且具有不同的风格

一个绝妙的答案！非常有帮助。 @Anand 我现在正在使用这两个 gem，直到现在都没有问题。