样式表单错误消息

本文介绍了样式表单错误消息-引导程序/轨道的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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