You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I love how easy it is to style forms with bootstrap but I felt that the validation classes could be improved a bit. For those of you who want to jump straight to the demo, here you go.
This is probably outside the scope of bootstrap but I also wrote some javascript that leverages HTML5 validation attributes to apply the appropriate .has-*. I plan on expanding this to include a pattern for .has-warning but this jsbin gets the general idea across.
The text was updated successfully, but these errors were encountered:
tm4321
changed the title
Form validation
(v4) Form validation
Mar 15, 2017
- collapse .form-control-* into .feedback-icon
- add :after to .form-control-feedback with content set by data-attributes based on .has-* of parent
- add transitions to .input-group-addon and .feedback-icon to be in sync with .form-control
- collapse .form-control-* into .feedback-icon
- add :after to .form-control-feedback with content set by data-attributes based on .has-* of parent
- add transitions to .input-group-addon and .feedback-icon to be in sync with .form-control
I love how easy it is to style forms with bootstrap but I felt that the validation classes could be improved a bit. For those of you who want to jump straight to the demo, here you go.
Lets look at the first validation example in the docs.
Currently we would have to do the following steps in javascript to toggle between the different validation states:
I think that we could eliminate step 2 and 3 by making the following changes:
_forms.scss:
I also added two new transitions to be in sync with .form-control
_variables.scss:
_forms.scss:
_input-group.scss:
This is probably outside the scope of bootstrap but I also wrote some javascript that leverages HTML5 validation attributes to apply the appropriate .has-*. I plan on expanding this to include a pattern for .has-warning but this jsbin gets the general idea across.
The text was updated successfully, but these errors were encountered: