入力フィールド内で検証エラーを表示するにはどうすればよいですか？

Question

私のレールアプリでは、simple_formを使用しています。私は、入力フィールドにエラーメッセージを表示する代わりに、以下に示すイメージのように、サイドに表示する必要があります。

私はこれをどのように行うことができますか？

Answer 1

CSSを使用して、エラーフィールドを入力フィールドの領域に移動できます。

example.html.erb

<div class="row"> 
    <%= f.text_field :email, class: "email" %> 
    <span class="error"> 
</div> 

example.css

.row .error { 
    margin: -20px; 
} 

例：http://codepen.io/phelpsiv/pen/ZOaomq