エラー表示で意図しない改行を解消する−fieldWithErrors、ActionView::Base、field_error_proc

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

こんにちは。maiです。
Ruby on Railsにはいろいろと便利機能がありますが、
フォームでvalidationに引っかかると該当箇所が赤く強調されるというのもその一つですね。
ただ赤く強調されるだけなら、とっても便利な機能がありますで終了なのですが、
この機能、該当箇所を強調するだけじゃなく、改行まで入っちゃうのです。

sample:元々の表示

sample:エラーになったときの表示

かなりカッコ悪いことになっています。
サイトのクオリティを考えれば、
ぜひとも元の表示のように1行の状態で赤枠が出る状態にしたいですね。

そこで、アラートが表示されている状態でhtmlのソースを覗いてみると、

<div class=”fieldWithErrors”><input id=”hoge” name=”hoge[hoge]” type=”text” value=”” /></div>

と書かれています。
犯人は<div>ですね。
<div>はブロック要素なので、閉じた後に改行されるのは仕様です。
デザイン的な制御はスタイルシートの仕事なので、
スタイルシートで「class=”fieldWithErrors”」を探してみると

.fieldWithErrors {
  padding: 2px;
  background-color: red;
  display: table;
}

デフォルトではこんなカンジになってます。
これを下のように書き換えます。

.fieldWithErrors {
  padding: 3px;
  border:2px solid red;
  display: inline;
}

これで表示を確認してみると…

いいカンジ。

PCサイトだけならこれで完了でいいのですが、
mobileサイトはスタイルシートですべて解決もちょっと難しいところ。
そもそも、該当箇所が<div>ではなくて<span>でくくられれば、
勝手に改行されることはなくなります。

そこで、environment.rbの最後の行あたりに以下の一行を追加します。

ActionView::Base.field_error_proc = Proc.new {|html_tag, instance|  %(<span class=”fieldWithErrors”>#{html_tag}</span>)}

これで挿入されるタグが<span>になります。

<div>の時はあった上下の余白もなくなってさらにいいカンジ。
（上下の余白はスタイルシートでも制御できますけど）

<span>は元々インライン要素なので、
さっき手直ししたスタイルシートの「display:inline」を削除します。
別に書いてあっても問題はありませんが、
いらないものは取ってしまいましょう。

.fieldWithErrors {
  padding: 3px;
  border:2px solid red;
}

これで完了。
（あってもなくてもいい部分だったので、表示は変わりません。）