Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add class when field is valid. #527

Open
cj opened this issue Mar 13, 2019 · 8 comments
Open

Add class when field is valid. #527

cj opened this issue Mar 13, 2019 · 8 comments
Assignees

Comments

@cj
Copy link

cj commented Mar 13, 2019

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
Copy link
Contributor

lcreid commented Mar 14, 2019

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
Copy link
Author

cj commented Mar 14, 2019

@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
Copy link

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

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
Copy link
Contributor

lcreid commented May 31, 2019

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

abrambailey commented May 31, 2019

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
Copy link
Contributor

lcreid commented May 31, 2019

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 lcreid self-assigned this Jun 2, 2019
@lcreid
Copy link
Contributor

lcreid commented Jun 2, 2019

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:

  • If the model hasn't been validated, then don't apply either is-valid or is-invalid
  • If the model has been validated, then apply is-invalid to invalid fields (as it already does), and apply is-valid to all fields that have a validation and don't have an error
  • Don't apply either class if the field doesn't have a validation

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants