fix(forms): BS4.beta form/input validation styles & components #847
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add browser validation support
form-fieldset is now an alias of form-group
|
@pi0 @alexsasharegan and @mosinve Could you guys go over the changes? |
Codecov Report
@@ Coverage Diff @@
## 1.x #847 +/- ##
==========================================
+ Coverage 41.31% 41.86% +0.55%
==========================================
Files 84 85 +1
Lines 2326 2343 +17
Branches 659 670 +11
==========================================
+ Hits 961 981 +20
+ Misses 1216 1213 -3
Partials 149 149
Continue to review full report at Codecov.
|
…strap-vue into tmorehouse-validation
…strap-vue into tmorehouse-validation
…strap-vue into tmorehouse-validation
alexsasharegan
approved these changes
Aug 16, 2017
added 2 commits
August 15, 2017 18:55
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Support for the new validation styles and states, and new/changed/removed components.
Components
New functional components:
<b-form-text>help text block<b-form-feedback>only shown when validation fails! orstate="invalid", as must be a sibling at the same level as the input and follow after the input<b-form-row>for creating tighterrowswith tighter margins inside formsNew components:
<b-form-textarea>Dedicated component for text area, with additional featuresBreaking change components:
<b-form-input>Removed textarea support.staticprop is nowplaintextand renders an input with new stylesRenamed components:
<b-form-fieldset>is now<b-form-group>(although<b-form-fieldset>is available as an alias ofform-group)Removed Components:
<b-form-static>removed in favor of newplaintextprop on<bform-input>and<b-form-textarea>Validation states:
the
stateprops now accepts one of three values:'valid'(green color),'invalid'(red color), ornull(default text color)The new
<b-form-feedback>component (used in the<form-group>component is only shown when validation isinvalidstate. It is not shown forvalidstates! (BS4 change in behavior)Validation can be performed one of three ways.
Two methods involve using browser HTML5 validation. Inputs must be wrapped in an element that has the class
was-validated(such asb-formandb-form-groupwhich have thevalidatedprop set (which adds thewas validatedclass to the wrapper (<b-form-radio>also supports thevalidatedprop).There are two ways to e control this feature. One is to use a
b-formwrapper withnovalidatenot set. The form components will immediately be validated (and display browser native error messages). The second option is to setnovalidateand then trap on submit and run the browser nativeform.checkValidity()method and then setvalidatedprop on<b-form>.<b-form>will emit the nativeform submitevent.The 3rd option (and probably the preferred method for Vue) is what BS4 calls server side validation, but it can be run on client. it applies
is-validoris-invalidto the inputs via thestateprop (set tovalidorinvalid) which will trigger contextual styles on the form controls. any<b-form-feedback>element taht is a sibling on the invalid control will be shown.