Rails simple_form gem is adding a green border to inputs that are pre-populated

Question

I am having a problem with the rails simple_form gem. I am using bootstrap 4 along with it.

I have installed the gem by adding gem 'simple_form' to the Gemfile. I have also run the generator via rails g simple_form:install --bootstrap.

Simple Form works almost perfectly in my app. Here is an example using a model called 'Store' that has one string attribute: 'name'.

<%= simple_form_for @store do |f| %>
  <%= f.input :name %>
  <%= f.button :submit, class: "btn-primary" %>
  <%= link_to "Cancel", stores_url, class: %w[btn btn-danger] %>
<% end %>

The only problem I'm having with this code is that when the form is used for the update page, simple_form adds an '.is-valid' class to the input element which causes bootstrap to add a green border to the field. This does not happen when the field is not pre-filled such as when using the form for the 'new' action.

Thanks

Answer 1

In config/initializers/simple_form_bootstrap.rb you have a few different blocks that start with config.wrapper. You can remove any reference to valid_class: 'is-valid' from them so that it is no longer included in your form inputs. i.e....

Change this

config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
  ...
  b.use :input, class: 'form-control', error_class: 'is-invalid', valid_class: 'is-valid'
  ...
end

To this (by removing valid_class)

config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'form-group-invalid' do |b|
  ...
  b.use :input, class: 'form-control', error_class: 'is-invalid'
  ...
end

And you can remove references to error_class as well if you don't want that included.