带有 Bootstrap 的 Rails 简单表单删除验证

Question

我有一个带有嵌套 has_many 关联的表单，并且一切正常，除非它加载了以前在那里进行编辑的所有字段，它们旁边有一个复选标记。我发现它与 simple_form 和 bootstrap 有关，但不知道如何禁用它们。表单代码如下：

<%= 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>

这就是它的样子：

想去掉绿色对勾

Answer 1

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

config/initializers/simple_form_bootstrap.rb 初始化器为此包含多个配置：

例如靠近顶部：

  # 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' 在所有不同的地方将其更改为 '' 应该可以解决问题。别忘了重启你的服务器！

Answer 2

我可以通过为我的表单添加一个覆盖 Bootstrap 验证样式的新类来解决此问题。请注意，您可能必须根据您的主题调整颜色变量。在此示例中，我在表单级别禁用了验证样式，但您也可以通过调整 CSS 并将类放在输入而不是表单上来轻松地在输入级别执行此操作。

使用 SCSS：

.no-bs-validation {
  .is-valid, .is-invalid {
    border-color: $gray-400;
    background-image: inherit;
    &:focus {
      border-color: inherit;
      box-shadow: 0 0 0 .2rem $gray-400;
    }
  }
}

那么在你的 simple_form 声明中你会这样做：

<%= simple_form_for @object, html: {novalidate: true, class: "no-bs-validation"} do |f| %>
  ...
<% end %>

片段：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">

<style>
.no-bs-validation .is-valid, .no-bs-validation .is-invalid {
    border-color: #ced4da;
    background-image: inherit;
}

.no-bs-validation .is-valid:focus, .no-bs-validation .is-invalid:focus {
    border-color: inherit;
    box-shadow: 0 0 0 0.2rem #ced4da;
}
</style>

<form class="no-bs-validation">
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Answer 3

无需向 Input 元素添加属性novalidate。但这将完全禁用客户端验证（当然不是 RoR 验证）。另请参阅 Bootstrap 文档：https://getbootstrap.com/docs/4.0/components/forms/#validation

所以在你的部分中这样做：

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