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

fix(forms): BS4.beta form/input validation styles & components #847

merged 98 commits into from Aug 16, 2017



tmorehouse commented Aug 15, 2017

Support for the new validation styles and states, and new/changed/removed components.


New functional components:

  • <b-form-text> help text block
  • <b-form-feedback> only shown when validation fails! or state="invalid", as must be a sibling at the same level as the input and follow after the input
  • <b-form-row> for creating tighter rows with tighter margins inside forms

New components:

  • <b-form-textarea> Dedicated component for text area, with additional features

Breaking change components:

  • <b-form-input> Removed textarea support. static prop is now plaintext and renders an input with new styles

Renamed components:

  • <b-form-fieldset> is now <b-form-group> (although <b-form-fieldset> is available as an alias of form-group)

Removed Components:

  • <b-form-static> removed in favor of new plaintext prop on <bform-input> and <b-form-textarea>

Validation states:

the state props now accepts one of three values: 'valid' (green color), 'invalid' (red color), or null (default text color)

The new <b-form-feedback> component (used in the <form-group> component is only shown when validation is invalid state. It is not shown for valid states! (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 as b-form and b-form-group which have the validated prop set (which adds the was validated class to the wrapper ( <b-form-radio> also supports the validated prop).

There are two ways to e control this feature. One is to use a b-form wrapper with novalidate not set. The form components will immediately be validated (and display browser native error messages). The second option is to set novalidate and then trap on submit and run the browser native form.checkValidity() method and then set validated prop on <b-form>. <b-form> will emit the native form submit event.

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-valid or is-invalid to the inputs via the state prop (set to valid or invalid) 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.

tmorehouse added some commits Aug 15, 2017

Update form.vue
Add browser validation support

@tmorehouse tmorehouse added this to the v1.0.0 milestone Aug 15, 2017

tmorehouse added some commits Aug 15, 2017

rename form-fieldset => form-group
form-fieldset is now an alias of form-group

@bootstrap-vue bootstrap-vue deleted a comment from codecov-io Aug 15, 2017

tmorehouse added some commits Aug 15, 2017

@tmorehouse tmorehouse removed the Status: WIP label Aug 16, 2017

@bootstrap-vue bootstrap-vue deleted a comment from codecov-io Aug 16, 2017


This comment has been minimized.


tmorehouse commented Aug 16, 2017

@pi0 @alexsasharegan and @mosinve

Could you guys go over the changes?


This comment has been minimized.

codecov-io commented Aug 16, 2017

Codecov Report

Merging #847 into 1.x will increase coverage by 0.55%.
The diff coverage is 50%.

Impacted file tree graph

@@            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
Impacted Files Coverage Δ
lib/components/form-checkbox.vue 42.1% <0%> (+1.56%) ⬆️
lib/components/form-feedback.js 100% <100%> (ø)
lib/components/form-file.vue 14.1% <13.04%> (ø) ⬆️
lib/components/form-radio.vue 60.71% <25%> (+14.88%) ⬆️
lib/components/form-input.vue 40.54% <40%> (-1.57%) ⬇️
lib/components/form-textarea.vue 52% <52%> (ø)
lib/components/form.vue 61.53% <66.66%> (+3.2%) ⬆️
lib/components/form-select.vue 64.7% <75%> (+1.54%) ⬆️
lib/components/form-group.vue 74% <79.41%> (ø)
... and 7 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8ff2623...d4c8126. Read the comment docs.

Alex Regan and others added some commits Aug 16, 2017

Alex Regan added some commits Aug 16, 2017

@tmorehouse tmorehouse changed the title from fix(forms): BS4.beta form/input validation styles to fix(forms): BS4.beta form/input validation styles & components Aug 16, 2017

@tmorehouse tmorehouse merged commit 00e2b6f into 1.x Aug 16, 2017

1 check passed

ci/circleci Your tests passed on CircleCI!

@tmorehouse tmorehouse deleted the tmorehouse-validation branch Aug 16, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment