如何將我的錯誤消息與Ruby on Rails的Simple_form對齊？

Question

目前，我的表單看起來像這樣，並顯示一條錯誤消息（“名稱”為必填字段）：

但是我想將“不能為空”錯誤與“名稱”放在一起，如下所示：

通過使用以下代碼從默認的引導程序Simple_form類進行更改，我為自己在“名稱”標簽和錯誤上提供了更多的自由：

<%= f.input :name, :required => true, :label_html => { :class => 'edit_form_titles' }, :error_html => { :class => 'cant_be_blank'} %>

對於這些類，我的css是：

  .edit_form_titles{
  display: block;
  margin-bottom: 0px;
  color: #333333;
  }

  .cant_be_blank{
  font-size:12px;
  }

如我所描述的，關於如何在錯誤名稱旁邊對齊錯誤消息的任何想法？ 謝謝你的幫助。

Answer 1

我設法使錯誤顯示在輸入框上方的標簽中。

在下面的代碼中，我給我的錯誤一個類，可以將其格式化為位置等，但是在輸入框下始終有一個空白div或其他內容，這使其他輸入框脫離了關節。

<%= f.input :name, :required => true, :label_html => { :class => 'edit_form_titles' }, :error_html => { :class => 'cant_be_blank'} %>

在我的初始值設定項/simple_form.rb中，有：

  config.wrappers :bootstrap, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper :tag => 'div', :class => 'controls' do |input|
      input.use :input
      input.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
      input.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
    end
  end

我將其更改為：

 config.wrappers :bootstrap, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.wrapper :tag => 'div', :class => 'label-error' do |input|
      b.use :label
      b.use :error, :wrap_with => { :tag => 'span', :class => 'help-block' }
    end
    b.wrapper :tag => 'div', :class => 'controls' do |ba|
      ba.use :input
      ba.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
    end
  end

這消除了輸入框下的空白空間，我可以設置cant_be_blank類的格式，以便文本恰好出現在標簽中文本的旁邊。