您的位置: 首页  >  技术问答  >  Rails - 简单形式Bootstrap - 显示内联错误全文（或任何地方）

Rails - 简单形式Bootstrap - 显示内联错误全文（或任何地方）

分类: 技术问答 • 2022-08-06 15:19:07
问题描述：

我很想弄清楚如何在rails 5中使用简单形式，以便在窗体中显示完整的错误消息。我得到的是在与消息顶部，上面写着一个盒子：Rails - 简单形式Bootstrap - 显示内联错误全文（或任何地方）

Please review the problems below:

相反的问题的列表或任何突出显示的表单字段 - 我什么也得不到。

我按照this post的建议，用'full_error'替换了我的初始化程序中的所有错误引用，但这只能解决父窗体的问题 - 嵌套字段仍然只是得到一个不完整的错误消息。有谁知道如何识别简单形式的错误？

# Use this setup block to configure all options available in SimpleForm. 
SimpleForm.setup do |config| 
    config.error_notification_class = 'alert alert-danger' 
    config.button_class = 'btn btn-green' 
    config.boolean_label_class = nil 

    config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| 
    b.use :html5 
    b.use :placeholder 
    b.optional :maxlength 
    b.optional :pattern 
    b.optional :min_max 
    b.optional :readonly 
    b.use :label, class: 'control-label' 

    b.use :input, class: 'form-control' 
    b.use :full_error, wrap_with: { tag: 'span', class: 'help-block' } 
    b.use :hint, wrap_with: { tag: 'p', class: 'help-block' } 
    end 

    config.wrappers :vertical_file_input, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| 
    b.use :html5 
    b.use :placeholder 
    b.optional :maxlength 
    b.optional :readonly 
    b.use :label, class: 'control-label' 

    b.use :input 
    b.use :full_error, wrap_with: { tag: 'span', class: 'help-block' } 
    b.use :hint, wrap_with: { tag: 'p', class: 'help-block' } 
    end 

    config.wrappers :vertical_boolean, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| 
    b.use :html5 
    b.optional :readonly 

    b.wrapper tag: 'div', class: 'checkbox' do |ba| 
     ba.use :label_input 
    end 

    b.use :full_error, wrap_with: { tag: 'span', class: 'help-block' } 
    b.use :hint, wrap_with: { tag: 'p', class: 'help-block' } 
    end 

    config.wrappers :vertical_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| 
    b.use :html5 
    b.optional :readonly 
    b.use :label, class: 'control-label' 
    b.use :input 
    b.use :full_error, wrap_with: { tag: 'span', class: 'help-block' } 
    b.use :hint, wrap_with: { tag: 'p', class: 'help-block' } 
    end 

    config.wrappers :horizontal_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| 
    b.use :html5 
    b.use :placeholder 
    b.optional :maxlength 
    b.optional :pattern 
    b.optional :min_max 
    b.optional :readonly 
    b.use :label, class: 'col-sm-3 control-label' 

    b.wrapper tag: 'div', class: 'col-sm-9' do |ba| 
     ba.use :input, class: 'form-control' 
     ba.use :full_error, wrap_with: { tag: 'span', class: 'help-block' } 
     ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' } 
    end 
    end 

    config.wrappers :horizontal_file_input, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| 
    b.use :html5 
    b.use :placeholder 
    b.optional :maxlength 
    b.optional :readonly 
    b.use :label, class: 'col-sm-3 control-label' 

    b.wrapper tag: 'div', class: 'col-sm-9' do |ba| 
     ba.use :input 
     ba.use :full_error, wrap_with: { tag: 'span', class: 'help-block' } 
     ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' } 
    end 
    end 

    config.wrappers :horizontal_boolean, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| 
    b.use :html5 
    b.optional :readonly 

    b.wrapper tag: 'div', class: 'col-sm-offset-3 col-sm-9' do |wr| 
     wr.wrapper tag: 'div', class: 'checkbox' do |ba| 
     ba.use :label_input 
     end 

     wr.use :full_error, wrap_with: { tag: 'span', class: 'help-block' } 
     wr.use :hint, wrap_with: { tag: 'p', class: 'help-block' } 
    end 
    end 

    config.wrappers :horizontal_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| 
    b.use :html5 
    b.optional :readonly 

    b.use :label, class: 'col-sm-3 control-label' 

    b.wrapper tag: 'div', class: 'col-sm-9' do |ba| 
     ba.use :input 
     ba.use :full_error, wrap_with: { tag: 'span', class: 'help-block' } 
     ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' } 
    end 
    end 

    config.wrappers :inline_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| 
    b.use :html5 
    b.use :placeholder 
    b.optional :maxlength 
    b.optional :pattern 
    b.optional :min_max 
    b.optional :readonly 
    b.use :label, class: 'sr-only' 

    b.use :input, class: 'form-control' 
    b.use :full_error, wrap_with: { tag: 'span', class: 'help-block' } 
    b.use :hint, wrap_with: { tag: 'p', class: 'help-block' } 
    end 

    config.wrappers :multi_select, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| 
    b.use :html5 
    b.optional :readonly 
    b.use :label, class: 'control-label' 
    b.wrapper tag: 'div', class: 'form-inline' do |ba| 
     ba.use :input, class: 'form-control' 
     ba.use :full_error, wrap_with: { tag: 'span', class: 'help-block' } 
     ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' } 
    end 
    end 
    # Wrappers for forms and inputs using the Bootstrap toolkit. 
    # Check the Bootstrap docs (http://getbootstrap.com) 
    # to learn about the different styles for forms and inputs, 
    # buttons and other elements. 
    config.default_wrapper = :vertical_form 
    config.wrapper_mappings = { 
    check_boxes: :vertical_radio_and_checkboxes, 
    radio_buttons: :vertical_radio_and_checkboxes, 
    file: :vertical_file_input, 
    boolean: :vertical_boolean, 
    datetime: :multi_select, 
    date: :multi_select, 
    time: :multi_select 
    } 
end

FORM

<%= simple_form_for(@proposal) do |f| %> 
    <%= f.error_notification %> 

<% @proposal.errors.full_messages.each do |msg| %> 
    <%= li= msg %> 
<% end %> 



    <div class="form-inputs" style="margin-bottom: 50px"> 
    <!-- General Organisation details --> 
    <div class="row"> 
     <div class="col-md-12"> 
     <%= f.input :title, :label => "Title" %> 

     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
     <%= f.input :byline, :label => "Tagline" %> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-md-12"> 
     <%= f.input :description, as: :text, :label => "Outline your proposal", input_html: { rows: 15 } %> 
     </div> 
    </div> 




    <!-- Package: :ethics considerations --> 
    <div class="row"> 
    <div class="col-md-12"> 
     <div class="form_title">Research Ethics</div> 
    </div> 
    </div> 

    <div class="row"> 
    <div class="col-md-12"> 

    <%= f.simple_fields_for :ethics do |f| %> 
     <%= f.error_notification %> 
     <%= render 'package/ethics/ethics_fields', f: f %> 

    <% end %> 

    <%= link_to_add_association 'Add another ethics issue', f, :ethics, partial: 'package/ethics/ethics_fields' %> 
    </div> 
    </div> 


    </div> 

    <div class="row"> 
    <div class="col-md-10 col-md-offset-1" style="margin-top: 50px"> 
     <div class="form-actions"> 
     <%= f.button :submit %> 
     </div> 
    </div> 
    </div> 
<% end %>

嵌套字段

<div class="nested-fields"> 

    <%# @proposal.ethics.errors.full_messages.each do |e| %> 
     <li><%#= e %></li> 
    <%# end %> 
    <div class="form-inputs"> 
     <div class="row"> 
      <div class="col-md-12 "> 
      <%= f.select :category, [ "Risk of harm", "Informed consent", "Anonymity and Confidentiality", "Deceptive practices", "Right to withdraw"], { label: "Principle" }, id: "main_category" %> 
      <%= f.select :subcategory, [], {}, id: "sub_category", disabled: true %> 
      <%= f.input :consideration, as: :text, :label => "Identify the ethics considerations?", :input_html => {:rows => 8} %> 
      <%= f.input :plan, as: :text, :label => "How will these considerations be managed?", :input_html => {:rows => 8} %> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6" style="margin-top: 20px; margin-bottom: 50px"> 
     <%= link_to_remove_association 'Remove this ethical issue', f %> 
     </div> 

    </div> 
</div>
+0

请粘贴您的表单。 – Sravan

+0

添加表格上面 – Mel

答

它看起来像你得到HAML和再培训局在错误显示的代码混淆。

此：

<% @proposal.errors.full_messages.each do |msg| %> 
    <%= li= msg %> 
<% end %>

应该看起来更像是这样的：

<% if @proposal.errors.any? %> 
<ul> 
<% @proposal.errors.full_messages.each do |msg| %> 
    <li><%= msg %></li> 
</ul> 
<% end %>

我猜你使用的蚕茧，所以你需要正确设置了，但有一个疑难杂症时使用Rails 5.

您的模型中需要如下内容：

class Proposal < ApplicationRecord 
    has_many: :ethics, inverse_of: :proposal 
    accepts_nested_attributes_for :ethics ... 
...

和

class Ethic < ApplicationRecord 
    belongs_to :proposal, inverse_of: :ethics 
...

注意的has_many .. inverse_of条款，工作轮在导轨5的错误。

如果您正确设置了accepts_nested_attributes_for子句，我认为@project.errors应包含表单的所有错误。

+0

你对伦理模型的反面的东西是正确的 - 这使得错误消失了，但是我如何打印错误中的道德属性伦理形式的嵌套部分？他们在表格顶部列出了错误提案列表，但是当我向下滚动到道德属性时，我得到的所有信息都是红色方框，请回顾下面的问题，然后再列出没有列表。 – Mel

+0

我不认为有一种明显的方式来分裂父母和孩子的错误。我会从simple_fields_for块中移除“”行，并依靠simple_form生成错误消息。顺便说一句，Sravan说你的simple_fields_for块需要一个不同的变量。 –

+0

但它实际上工作正常与f：f - 我不知道我确实需要它。这些属性是使用f创建的（与提议相同）。 – Mel

答

我在你的代码中发现的第一个错误是，在你的嵌套字段，你已经采取了相同的变量f该参数可能会受到母体参数的影响10之三f

所以，

嵌套会，

<%= f.simple_fields_for :ethics do |ff| %> 
     <%= ff.error_notification %> 
     <%= render 'package/ethics/ethics_fields', f: f %> 
<% end %>

现在的形式，

<%= simple_form_for(@proposal) do |f| %> 
    <%= f.error_notification %> 

<% @proposal.errors.full_messages.each do |msg| %> 
    <%= li= msg %> 
<% end %> 



    <div class="form-inputs" style="margin-bottom: 50px"> 
    <!-- General Organisation details --> 
    <div class="row"> 
     <div class="col-md-12"> 
     <%= f.input :title, :label => "Title" %> 

     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
     <%= f.input :byline, :label => "Tagline" %> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-md-12"> 
     <%= f.input :description, as: :text, :label => "Outline your proposal", input_html: { rows: 15 } %> 
     </div> 
    </div> 




    <!-- Package: :ethics considerations --> 
    <div class="row"> 
    <div class="col-md-12"> 
     <div class="form_title">Research Ethics</div> 
    </div> 
    </div> 

    <div class="row"> 
    <div class="col-md-12"> 

    <%= f.simple_fields_for :ethics do |ff| %> 
     <%= ff.error_notification %> 
     <%= render 'package/ethics/ethics_fields', f: ff %> 

    <% end %> 

    <%= link_to_add_association 'Add another ethics issue', f, :ethics, partial: 'package/ethics/ethics_fields' %> 
    </div> 
    </div> 


    </div> 

    <div class="row"> 
    <div class="col-md-10 col-md-offset-1" style="margin-top: 50px"> 
     <div class="form-actions"> 
     <%= f.button :submit %> 
     </div> 
    </div> 
    </div> 
<% end %> 




<%= f.simple_fields_for :ethics do |ff| %> 
    <%= ff.error_notification %> 
    <%= render 'package/ethics/ethics_fields', f: ff %> 
    <% @proposal.ethics.errors.full_messages.each do |msg| %> 
     <%= li= msg %> 
    <% end %> 
<% end %>

编辑：即使上面没有解决问题，

尝试从获取ethics object中的错误可变

所以，

<%= f.simple_fields_for :ethics do |ff| %> 
    <%= ff.error_notification %> 
    <% @proposal.ethics.errors.full_messages.each do |msg| %> 
    <%= li= msg %> 
    <% end %> 
    <%= render 'package/ethics/ethics_fields', f: f %> 
<% end %>
+0

请检查这个答案，随时问任何疑问。 – Sravan

+0

但如果是这样的话，所有的道德领域将无法正常工作。 f.input在输入元素的部分伦理嵌套字段中工作正常。我无法找到一种方式来显示该形式的错误 – Mel

+0

道德领域无法正常工作，但错误消息可能无法显示。检查答案的最后部分。 – Sravan

答

另一种选择是直接在现场显示错误消息。

<%= f.input :title, :label => "Title", id:"title" %> 
<%= f.error :title, :id => "title_error" %>

这将显示标题字段旁标题的错误信息。您可以将f.error方法添加到表单中的每个字段，而不是在表单上方显示<ul>，或者在表单上方显示<ul>。

对于nested_form_fields，尝试将validates_associated :assoc_model_name添加到主模型中。这也会为关联的模型运行验证。

+0

这应该会使用simple_form gem自动发生。它甚至包括相关字段所需的错误。 –

相关推荐