我已经开始使用Simple-form和Bootstrap了,我试图遵循这个引用:Simple form + Bootstrap但我不知道发生了什么,因为当一个字段失败时,会发生以下情况:
关于这个截图我有一个问题:
1)如您所见,价格字段没有被红色包围。我怎样才能做到这一点?
这是我的表格代码:
<%= simple_form_for @lesson, :html => { :class => 'well' } do |lesson_form| %>
<% if lesson_form.error_notification %>
<div class="alert alert-error fade in">
<a class="close" data-dismiss="alert" href="#">×</a>
<%= lesson_form.error_notification %>
</div>
<% end %>
<%= lesson_form.input :title %>
<%= lesson_form.input :category %>
<%= lesson_form.input :description %>
<%= lesson_form.input :price %>
<%= lesson_form.button :submit, :label => 'Create', :class => 'btn btn-primary btn-large' %>
<% end -%>
答案 0 :(得分:5)
我认为,在错误通知发生时,您的参考中的代码有些误导和错误。
变化:
<% if lesson_form.error_notification %>
<div class="alert alert-error fade in">
<a class="close" data-dismiss="alert" href="#">×</a>
<%= lesson_form.error_notification %>
</div>
<% end %>
,简单地说:
<%= lesson_form.error_notification %>
然后,在config/locals/simple_form.en.yml
中,将default_message
更改为:
default_message: '<a class="close" data-dismiss="alert">×</a>Some errors were found, please take a look:'
这将修复错误警告框中的不对称性(通过修复结果标记)。
为了解决验证错误未显示为红色的问题,您必须共享标记,以便我们可以看到正在发生的事情。
答案 1 :(得分:0)
查看价格字段旁边的文字。简单地将错误放在字段旁边。
要清理表单,请尝试以下操作:
删除它,使用简单形式的gem不需要它:
<% if lesson_form.error_notification %>
<div class="alert alert-error fade in">
<a class="close" data-dismiss="alert" href="#">×</a>
<%= lesson_form.error_notification %>
</div>
<% end %>
将您的:html => { :class => 'well' }
更改为:html => { :class => 'well form-horizontal' }
这将更好地布局您的表单并将bootstrap css应用于错误字段和文本。