【问题标题】:Simple form error messages appearing next to the form submission in Ruby on RailsRuby on Rails 中表单提交旁边显示的简单表单错误消息
【发布时间】:2016-08-11 20:22:35
【问题描述】:

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

我的控制器看起来像

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;
}

【问题讨论】:

    标签: css ruby-on-rails forms haml simple-form


    【解决方案1】:

    每个模型都将定义一个错误哈希,由模型每个属性的错误组成。您可以在视图中执行类似@form_submission.errors.full_messages_for(:first_name) 的操作,以仅访问一个属性的错误,在本例中是@form_submission 模型的first_name 属性的错误。

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

    <% 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)} %>
    

    【讨论】:

    • 我认为这是一个很棒的解决方案!但是我一直发现自己在undefined method 'errors' for nil:NilClass 处收到一条错误消息
    • 你应该使用@form_submission作为你的本地而不是@post@kdweber89。
    • 是的,我以@post 为例,但我会更新以使其适用于您的配置。
    • 我真的很抱歉没有完成这项工作,我非常感谢您的帮助,但就目前而言。我采用了您创建的部分,并在我看来引用了它。但是,如果我尝试提交没有条目的表单,则不会发生任何事情。在我的控制台中,我看到我收到了 Uncaught ReferenceError: whichNavGetsTriggered is not defined
    • 会不会是因为我使用的是text_field 而不是input?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-12-20
    • 1970-01-01
    • 1970-01-01
    • 2015-11-19
    • 1970-01-01
    • 2016-10-12
    • 2022-11-18
    相关资源
    最近更新 更多