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

在其中说有效的类：'is-valid'在所有不同的地方将其更改为''应该可以解决此问题。不要忘记重启服务器！

Answer 2

无需将属性novalidate添加到Input元素。但这将完全禁用客户端验证（当然不是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>

Answer 3

我能够通过为表单添加一个新类来解决此问题，该类将覆盖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>

带Bootstrap的Rails Simple Form删除验证

3 个答案: