Skip to content

Commit aca4a5c

Browse files
jacobmllr95jacobmllr95
authored
feat(docs): improve form validation examples (#4584)
1 parent f917bc3 commit aca4a5c

File tree

1 file changed

+35
-157
lines changed

1 file changed

+35
-157
lines changed

‎docs/markdown/reference/validation/README.md

Lines changed: 35 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -18,87 +18,17 @@ This is a verbose example designed to show how BootstrapVue and Vuelidate intera
1818
applications, you'd likely want to abstract some of the functionality, such as creating a standard
1919
error message component.
2020

21-
```html
22-
<template>
23-
<div>
24-
<b-form @submit.stop.prevent="onSubmit">
25-
<b-form-group id="example-input-group-1" label="Name" label-for="example-input-1">
26-
<b-form-input
27-
id="example-input-1"
28-
name="example-input-1"
29-
v-model="$v.form.name.$model"
30-
:state="$v.form.name.$dirty ? !$v.form.name.$error : null"
31-
aria-describedby="input-1-live-feedback"
32-
></b-form-input>
33-
34-
<b-form-invalid-feedback id="input-1-live-feedback">
35-
This is a required field and must be at least 3 characters.
36-
</b-form-invalid-feedback>
37-
</b-form-group>
38-
39-
<b-form-group id="example-input-group-2" label="Food" label-for="example-input-2">
40-
<b-form-select
41-
id="example-input-2"
42-
name="example-input-2"
43-
v-model="$v.form.food.$model"
44-
:options="foods"
45-
:state="$v.form.food.$dirty ? !$v.form.food.$error : null"
46-
aria-describedby="input-2-live-feedback"
47-
></b-form-select>
48-
49-
<b-form-invalid-feedback id="input-2-live-feedback">
50-
This is a required field.
51-
</b-form-invalid-feedback>
52-
</b-form-group>
53-
54-
<b-button type="submit" variant="primary" :disabled="$v.form.$invalid">Submit</b-button>
55-
</b-form>
56-
</div>
57-
</template>
58-
59-
<script>
60-
import { validationMixin } from 'vuelidate'
61-
import { required, minLength } from 'vuelidate/lib/validators'
62-
63-
export default {
64-
mixins: [validationMixin],
65-
data() {
66-
return {
67-
foods: ['apple', 'orange'],
68-
form: {
69-
name: null,
70-
food: null
71-
}
72-
}
73-
},
74-
validations: {
75-
form: {
76-
food: {
77-
required
78-
},
79-
name: {
80-
required,
81-
minLength: minLength(3)
82-
}
83-
}
84-
},
85-
methods: {
86-
onSubmit() {
87-
this.$v.form.$touch()
88-
if (this.$v.form.$anyError) {
89-
return
90-
}
91-
92-
// Form submit logic
93-
}
94-
}
95-
}
96-
</script>
97-
```
21+
<iframe
22+
src="https://codesandbox.io/embed/inspiring-haslett-lzq6p?fontsize=14&hidenavigation=1&module=%2FApp.vue&theme=dark"
23+
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
24+
title="BootstrapVue Vuelidate example"
25+
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
26+
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
27+
></iframe>
9828
99-
## VeeValidate
29+
## VeeValidate v2
10030

101-
[VeeValidate](https://logaretm.github.io/vee-validate/) is a plugin for Vue.js that allows you to
31+
[VeeValidate](http://vee-validate.logaretm.com/v2/) is a plugin for Vue.js that allows you to
10232
validate input fields and display errors. It has full support for
10333
[Vue I18n](https://kazupon.github.io/vue-i18n/) and provides fairly good out of the box error
10434
messages.
@@ -122,81 +52,29 @@ Vue.use(VeeValidate, {
12252
})
12353
```
12454

125-
### VeeValidate example
126-
127-
Same example as above, just modified for VeeValidate:
128-
129-
```html
130-
<template>
131-
<div>
132-
<b-form @submit.stop.prevent="onSubmit">
133-
<b-form-group id="example-input-group-1" label="Name" label-for="example-input-1">
134-
<b-form-input
135-
id="example-input-1"
136-
name="example-input-1"
137-
v-model="form.name"
138-
v-validate="{ required: true, min: 3 }"
139-
:state="validateState('example-input-1')"
140-
aria-describedby="input-1-live-feedback"
141-
></b-form-input>
142-
143-
<b-form-invalid-feedback id="input-1-live-feedback">
144-
This is a required field and must be at least 3 characters.
145-
</b-form-invalid-feedback>
146-
</b-form-group>
147-
148-
<b-form-group id="example-input-group-2" label="Food" label-for="example-input-2">
149-
<b-form-select
150-
id="example-input-2"
151-
name="example-input-2"
152-
v-model="form.food"
153-
v-validate="{ required: true }"
154-
:options="foods"
155-
:state="validateState('example-input-2')"
156-
aria-describedby="input-2-live-feedback"
157-
></b-form-select>
158-
159-
<b-form-invalid-feedback id="input-2-live-feedback">
160-
This is a required field.
161-
</b-form-invalid-feedback>
162-
</b-form-group>
163-
164-
<b-button type="submit" variant="primary" :disabled="veeErrors.any()">Submit</b-button>
165-
</b-form>
166-
</div>
167-
</template>
168-
169-
<script>
170-
export default {
171-
data() {
172-
return {
173-
foods: ['apple', 'orange'],
174-
form: {
175-
name: null,
176-
food: null
177-
}
178-
}
179-
},
180-
methods: {
181-
validateState(ref) {
182-
if (
183-
this.veeFields[ref] &&
184-
(this.veeFields[ref].dirty || this.veeFields[ref].validated)
185-
) {
186-
return !this.veeErrors.has(ref)
187-
}
188-
return null
189-
},
190-
onSubmit() {
191-
this.$validator.validateAll().then((result) => {
192-
if (!result) {
193-
return
194-
}
195-
196-
// Form submit logic
197-
})
198-
}
199-
}
200-
}
201-
</script>
202-
```
55+
### VeeValidate v2 example
56+
57+
<iframe
58+
src="https://codesandbox.io/embed/vigilant-kirch-8lpns?fontsize=14&hidenavigation=1&module=%2FApp.vue"
59+
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
60+
title="BoostrapVue VeeValidate v2 example"
61+
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
62+
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
63+
></iframe>
64+
65+
## VeeValidate v3
66+
67+
[VeeValidate](http://vee-validate.logaretm.com/) is a plugin for Vue.js that allows you to validate
68+
input fields and display errors. It has full support for
69+
[Vue I18n](https://kazupon.github.io/vue-i18n/) and provides fairly good out of the box error
70+
messages.
71+
72+
### VeeValidate v3 example
73+
74+
<iframe
75+
src="https://codesandbox.io/embed/boostrapvue-veevalidate-v3-example-xm3et?fontsize=14&hidenavigation=1&module=%2FApp.vue&theme=dark"
76+
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
77+
title="BoostrapVue VeeValidate v3 example"
78+
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
79+
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
80+
></iframe>

0 commit comments

Comments
 (0)