Ruby on rails 带有引导删除验证的Rails简单表单

我有一个嵌套的表单，它有很多关联，并且一切都正常工作，除了当它加载之前所有的字段进行编辑时，在它们旁边有一个复选标记。我知道这与简单的表单和引导有关，但不知道如何禁用它们。以下是表格代码：

<%= simple_form_for ([current_user, @character]), defaults: {label: false} do |f| %>
          <div id="tasks">
            <%= f.simple_fields_for :character_levels, f.object.character_levels.order(:id) do |l| %>
              <%= render '/characters/DnD5e/class_fields', f: l, character: @character %>
          <% end %>
          <div class="links">
            <%= link_to_add_association 'Add Level', f, :character_levels, partial: 'characters/DnD5e/class_fields', render_options: {locals: {character: @character}}, class: "btn btn-primary" %>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <%= f.submit "Save Changes", class: 'btn btn-primary' %>
      </div>
      <% end %>

接近

以下是部分内容：

<div class="row nested-fields">
  <div class="col-6">
    <%= f.input :character_class_id, collection: CharacterClass.where('game_type_id=? AND (user_id IS ? OR user_id=?)', character.game_type_id, nil, current_user) %>
  </div>
  <div class="col-4">
    <%= f.input :hp, as: :integer %>
  </div>
  <div class="col-2">
    <%= link_to_remove_association '<i class="material-icons">close</i>'.html_safe, f %>
  </div>
</div>

这就是它看起来的样子：

---

要清除绿色复选标记，无需向输入元素添加属性

novalidate

。但这将完全禁用客户端验证（当然不是RoR验证）。另请参见引导文档：

因此，请在您的部分中执行此操作：

<div class="row nested-fields">
  <div class="col-6">
    <%= f.input :character_class_id, html_input: { novalidate:'novalidate'}, collection: CharacterClass.where('game_type_id=? AND (user_id IS ? OR user_id=?)', character.game_type_id, nil, current_user) %>
  </div>
  <div class="col-4">
    <%= f.input :hp, as: :integer, html_input: { novalidate:'novalidate'} %>
  </div>
  <div class="col-2">
    <%= link_to_remove_association '<i class="material-icons">close</i>'.html_safe, f %>
  </div>
</div>

---

我可以通过为我的表单添加一个覆盖引导验证样式的新类来解决这个问题。请注意，您可能需要根据主题相应地调整颜色变量。在本例中，我将在表单级别禁用验证样式，但您也可以通过调整CSS并将类放在输入而不是表单上，轻松地在输入级别禁用验证样式

使用SCSS：

。无bs验证{
.有效，.无效{
边框颜色：$gray-400；
背景图像：继承；
&：焦点{
边框颜色：继承；
盒影：0.2rem$gray-400；
}
}
}

那么，在您的简单表单声明中，您将执行以下操作：

...

片段：

.无bs验证。有效，.无bs验证。无效{
边框颜色：#ced4da；
背景图像：继承；
}
.无bs验证。有效：焦点。无bs验证。无效：焦点{
边框颜色：继承；
盒影：0.2rem#ced4da；
}
名字
看起来不错！
姓
看起来不错！
用户名
@
请选择一个用户名。
城市
请提供一个有效的城市。
陈述
请提供有效状态。
拉链
请提供有效的邮政编码。
同意条款和条件
提交前必须同意。
提交表格

也有类似的问题，并找到了不同的（更好的？）解决方案：

config/initializers/simple\u form\u bootstrap.rb

initializer包含多个配置：

例如，在顶部附近：

  # add validation classes to `input_field`
  config.input_field_error_class = 'is-invalid'
  config.input_field_valid_class = 'is-valid'

再往下看：

  config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :minlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label
    b.use :input, class: 'form-control', error_class: 'is-invalid', valid_class: 'is-valid'
    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
  end

---

如果它说valid_class:“is valid”，那么在所有不同的位置将其更改为“”，应该可以解决这个问题。别忘了重新启动服务器

如果您共享

/characters/DnD5e/class_字段

部分，我将用实际代码更新我的答案。添加部分代码请参阅更新的答案，该答案没有任何作用