css - Ruby on Rails 中表单提交旁边出现的简单表单错误消息

Question

我正在处理一个表单，但在提交表单时遇到了问题。如果用户弄乱或跳过其中一个条目，所有错误消息都会呈现在页面顶部。我想知道是否可以让它们在每次提交的旁边呈现？

我的 Controller 看起来像

def new
 @form_submission ||= FormSubmission.new
end

def create
 @form_submission = FormSubmission.new(form_submission_params)

 if @form_submission.save
   redirect_to thank_you_path
 else
   render :new
 end
end

我的观点看起来像

 .field
  = f.label :first_name, required: false, class: "font required-field"
 = f.text_field :first_name, :required => "", class: "stretch test"

和我的 CSS

.font{
 vertical-align: text-bottom;
 font-size: 15px;
 font-weight: bold;
 font-family: "Helvetica Neue";
 height: 15px;
}

.required-field::before{
content: ' *';
float: right;
color: red;
padding-left: 5px;
}

.test:valid{
  border: 1px solid #00aeef;
}

.test:invalid{
  border: 1px solid red;
}

Answer 1

每个模型都将定义一个错误散列，由模型的每个属性的错误组成。您可以在您的 View 中执行类似 @form_submission.errors.full_messages_for(:first_name) 的操作来访问一个属性的错误，在本例中是 first_name 属性的错误@form_submission 模型。

我通常会为表单错误创建一个部分，看起来像这样

<% unless errors.nil? %> 
  <div class="error-explanation">
    <ul class="list-unstyled">
      <% errors.each do |error| %>
        <li><%= error %></li>
      <% end %>
    </ul>
  </div>
<% end %>

然后为表单中的每个字段访问它

<%= render partial: 'shared/form_error', locals: {errors: @form_submission.errors.full_messages_for(:body)} %>