bootstrap-ruby / bootstrap_form

Official repository of the bootstrap_form gem, a Rails form builder that makes it super easy to create beautiful-looking forms using Bootstrap 5.
MIT License
1.64k stars 353 forks source link

Add class when field is valid. #527

Open cj opened 5 years ago

cj commented 5 years ago

It would be nice to add a class when the input is valid i.e. is-valid.

Image 2019-03-13 at 5 18 02 PM

lcreid commented 5 years ago

Thanks very much for the feedback. The suggestion makes a lot of sense.

We strive to maintain backwards compatibility, so I'm wondering if you can think of situations where we might change the way an existing application works if we add this feature?

Do you see all fields getting the is-valid class, unless they were invalid? Or would we only put is-valid on fields that had a Rails validation defined for them, and were valid? Or some other criteria?

Thanks again for the suggestion!

cj commented 5 years ago

@lcreid I think doing it how simple_form/boostrap does it would be the best approach, only showing it if it has validation.

Currently I am doing this config/initializers/boostrap_form_group_builder.rb:

# frozen_string_literal: true

module BootstrapForm
  module FormGroupBuilder
    extend ActiveSupport::Concern

    private

    # :reek:NilCheck
    def valid?(method)
      object&.respond_to?(method) && object.send(method).present?
    end

    # :reek:ControlParameter
    def form_group_css_options(method, html_options, options)
      css_options = html_options || options

      # Add control_class; allow it to be overridden by :control_class option
      control_classes = css_options.delete(:control_class) { control_class }

      classes = [control_classes, css_options[:class]]

      if error?(method)
        classes << ' is-invalid'
      elsif valid?(method)
        classes << ' is-valid'
      end

      css_options[:class] = classes.compact.join(' ')

      if options[:label_as_placeholder]
        css_options[:placeholder] = form_group_placeholder(options, method)
      end

      css_options
    end
  end
end
abrambailey commented 5 years ago

Would be really nice if this worked. I noticed after someone interacts with a form that has invalid fields, the invalid fields stay marked as invalid, even after they are corrected.

abrambailey commented 5 years ago

Try submitting this form and then correcting the blank fields etc to see the desired behavior: http://simple-form-bootstrap.plataformatec.com.br/examples/vertical

lcreid commented 5 years ago

Thanks for the feedback. We always welcome pull requests, if you fancy taking this on yourself. Just assign this issue to yourself (Look for "assignees" in upper-right area of this page) first so no one else works on it. I'll see if I have some time this weekend to take a stab at it if no one else is working on it.

abrambailey commented 5 years ago

Thanks @lcreid ... Slammed atm, so probably won't happen, but appreciate the invite / open door. Just wanted to clarify one thing. It looks like simple_form doesn't handle this either... If you fill in the Bootstrap form and submit the validation works, but if you fill in the SimpleForm generated Bootstrap form, it does not.

image

I'm not certain, but I think the main issue is not having the needs-validation and was-validated classes on the form itself.

Correct:

image

lcreid commented 5 years ago

Thanks again. I happened to be taking a quick look myself, and was seeing similar things to what you're saying. I appreciate your extra input. I understand if you don't have time to put together a PR -- that's the same reason I haven't had a chance to do anything about this issue :-).

lcreid commented 5 years ago

First, I'm not a front-end programmer. I started using bootstrap_form because it let me do nice forms without knowing too much about the front end. So please correct me if I say anything wrong in what follows. ;-)

bootstrap_form operates on a very traditional Rails model of server-side rendering. Bootstrap adds some front-end behaviour (tabs, tooltips, etc), but by and large everything that happens comes from the back end.

So I think adding an is-valid class to fields that are valid would be relatively straight-forward. We'd just have to define the rules that we wanted to apply:

However, none of those changes would be visible until the user clicked the submit button again.

HTML5 enables the browser to give more immediate feedback. I think it would be cool if we could easily take advantage of the HTML5 validations, but I can also see some big challenges, mostly in the fact that Rails can do pretty much anything at validation time, and it would be difficult to incorporate that in the HTML5 validation.

Before I invest some time in this, can you please tell me if it's the immediate feedback to the user (without hitting submit) that is the feature you're really looking for?