Add class when field is valid. #527

Activity

1. lcreid commented on Mar 14, 2019

   

   lcreid

   on Mar 14, 2019

   Contributor

   More actions

   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!
2. cj commented on Mar 14, 2019

   

   cj

   on Mar 14, 2019

   Last edited by cj

   Author

   More actions

   @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
3. abrambailey commented on May 30, 2019

   

   abrambailey

   on May 30, 2019

   More actions

   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.
4. abrambailey commented on May 30, 2019

   

   abrambailey

   on May 30, 2019

   More actions

   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
5. lcreid commented on May 31, 2019

   

   lcreid

   on May 31, 2019

   Contributor

   More actions

   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.
6. abrambailey commented on May 31, 2019

   

   abrambailey

   on May 31, 2019

   Last edited by abrambailey

   More actions

   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.

   

   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:

   
7. lcreid commented on May 31, 2019

   

   lcreid

   on May 31, 2019

   Contributor

   More actions

   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 :-).

   👍React with 👍1Reacted by Abram Bailey
8. lcreid

   self-assigned this

   on Jun 2, 2019
9. lcreid commented on Jun 2, 2019

   

   lcreid

   on Jun 2, 2019

   Contributor

   More actions

   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?