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

Question

I have a form with nested has_many assocations and got everything working fine, except when its load all the fields previously there for editing, have a checkmark next to them. Ive figured out its to do with simple_form and bootstrap but not sure how to disable them. Heres the form code:

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

heres the partial:

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

And this is what it looks like:

Want to get rid of the green checkmarks

Answer 1

Had a similar issue and found a different (better?) solution:

the config/initializers/simple_form_bootstrap.rb initializer contains multiple configurations for this:

for example near the top:

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

and further down:

  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

where it says valid_class: 'is-valid' change it to '' in all the different places should fix the issue. Don't forget to restart your server!

Answer 2

I was able to fix this by adding a new class for my form which overrides the Bootstrap validation styles. Note that you may have to adjust the color variables accordingly to your theme. In this example, I'm disabling the validation styles at the form level, but you could also easily do it at the input level by adjusting the CSS and putting the class on the input instead of the form.

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

So then in your simple_form declaration you would do this:

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

Snippet:

 <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

No need to add an attribute novalidate to the Input element. But this will disable the client-side validations altogether (not RoR validation of course). See also Bootstrap docs: https://getbootstrap.com/docs/4.0/components/forms/#validation

So do this in your partial:

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