simple_formとbootstrapの組み合わせは最強だと思うんですが、事情によりbootstrapが使えない場合もあります。
そうなってくると、simple_formの見せ場が難しくなり、form_forでやる？みたいになりそうですが、それはもう私みたいにsimple_formとbootstrapに慣れた人には辛過ぎます。
simple_formは出力をカスタマイズするためのwrapperがありますから、これを使ってみましょう。
今回は、フォームをtableで定義するという方法を使います。

参考ページ:simple_form をTable 要素で使う

このページに倣って書いてみたのですが、これだとエラーメッセージがそれぞれの項目毎に出てくれませんでした。それは非常に困る。config.wrappersの書き方の参考になるものはないか？と思ってググっていたのですが、あまり見つからず。そう思っていたところに、bootstrapのconfig.wrappersを見ればいいんじゃないか？と思って確認したところ、これがビンゴ！すごいわかりやすいです。

SimpleForm.setup do |config|
// ...省略
// 最後に追記する
  config.wrappers :table, tag: :tr, class: :input, hint_class: :field_with_hint,
                  error_class: :field_with_errors do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label, wrap_with: {tag: 'td'}
    b.wrapper tag: 'td' do |ba|
      ba.use :input
      ba.use :hint, wrap_with: {tag: :span, class: :hint}
      ba.use :error, wrap_with: {tag: :span, class: :error}
    end
  end
end

inputをwrapperのtdで括って、その中にhint, errorを持たせるようにすると、同一td内にヒントとエラーメッセージが展開されるようです。これで前に進める！

Tweet