Skip to content

docs: improve form validation examples (closes #4550) #4584

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.

Sign up for GitHub

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

Merged
merged 1 commit into from
Jan 9, 2020
Merged

docs: improve form validation examples (closes #4550) #4584

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
192 changes: 35 additions & 157 deletions docs/markdown/reference/validation/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,87 +18,17 @@ This is a verbose example designed to show how BootstrapVue and Vuelidate intera
applications, you'd likely want to abstract some of the functionality, such as creating a standard
error message component.

```html
<template>
<div>
<b-form @submit.stop.prevent="onSubmit">
<b-form-group id="example-input-group-1" label="Name" label-for="example-input-1">
<b-form-input
id="example-input-1"
name="example-input-1"
v-model="$v.form.name.$model"
:state="$v.form.name.$dirty ? !$v.form.name.$error : null"
aria-describedby="input-1-live-feedback"
></b-form-input>

<b-form-invalid-feedback id="input-1-live-feedback">
This is a required field and must be at least 3 characters.
</b-form-invalid-feedback>
</b-form-group>

<b-form-group id="example-input-group-2" label="Food" label-for="example-input-2">
<b-form-select
id="example-input-2"
name="example-input-2"
v-model="$v.form.food.$model"
:options="foods"
:state="$v.form.food.$dirty ? !$v.form.food.$error : null"
aria-describedby="input-2-live-feedback"
></b-form-select>

<b-form-invalid-feedback id="input-2-live-feedback">
This is a required field.
</b-form-invalid-feedback>
</b-form-group>

<b-button type="submit" variant="primary" :disabled="$v.form.$invalid">Submit</b-button>
</b-form>
</div>
</template>

<script>
import { validationMixin } from 'vuelidate'
import { required, minLength } from 'vuelidate/lib/validators'

export default {
mixins: [validationMixin],
data() {
return {
foods: ['apple', 'orange'],
form: {
name: null,
food: null
}
}
},
validations: {
form: {
food: {
required
},
name: {
required,
minLength: minLength(3)
}
}
},
methods: {
onSubmit() {
this.$v.form.$touch()
if (this.$v.form.$anyError) {
return
}

// Form submit logic
}
}
}
</script>
```
<iframe
src="https://codesandbox.io/embed/inspiring-haslett-lzq6p?fontsize=14&hidenavigation=1&module=%2FApp.vue&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="BootstrapVue Vuelidate example"
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>

## VeeValidate
## VeeValidate v2

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

### VeeValidate example

Same example as above, just modified for VeeValidate:

```html
<template>
<div>
<b-form @submit.stop.prevent="onSubmit">
<b-form-group id="example-input-group-1" label="Name" label-for="example-input-1">
<b-form-input
id="example-input-1"
name="example-input-1"
v-model="form.name"
v-validate="{ required: true, min: 3 }"
:state="validateState('example-input-1')"
aria-describedby="input-1-live-feedback"
></b-form-input>

<b-form-invalid-feedback id="input-1-live-feedback">
This is a required field and must be at least 3 characters.
</b-form-invalid-feedback>
</b-form-group>

<b-form-group id="example-input-group-2" label="Food" label-for="example-input-2">
<b-form-select
id="example-input-2"
name="example-input-2"
v-model="form.food"
v-validate="{ required: true }"
:options="foods"
:state="validateState('example-input-2')"
aria-describedby="input-2-live-feedback"
></b-form-select>

<b-form-invalid-feedback id="input-2-live-feedback">
This is a required field.
</b-form-invalid-feedback>
</b-form-group>

<b-button type="submit" variant="primary" :disabled="veeErrors.any()">Submit</b-button>
</b-form>
</div>
</template>

<script>
export default {
data() {
return {
foods: ['apple', 'orange'],
form: {
name: null,
food: null
}
}
},
methods: {
validateState(ref) {
if (
this.veeFields[ref] &&
(this.veeFields[ref].dirty || this.veeFields[ref].validated)
) {
return !this.veeErrors.has(ref)
}
return null
},
onSubmit() {
this.$validator.validateAll().then((result) => {
if (!result) {
return
}

// Form submit logic
})
}
}
}
</script>
```
### VeeValidate v2 example

<iframe
src="https://codesandbox.io/embed/vigilant-kirch-8lpns?fontsize=14&hidenavigation=1&module=%2FApp.vue"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="BoostrapVue VeeValidate v2 example"
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>

## VeeValidate v3

[VeeValidate](http://vee-validate.logaretm.com/) is a plugin for Vue.js that allows you to validate
input fields and display errors. It has full support for
[Vue I18n](https://kazupon.github.io/vue-i18n/) and provides fairly good out of the box error
messages.

### VeeValidate v3 example

<iframe
src="https://codesandbox.io/embed/boostrapvue-veevalidate-v3-example-xm3et?fontsize=14&hidenavigation=1&module=%2FApp.vue&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="BoostrapVue VeeValidate v3 example"
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>