Validations
In order to validate fields, we used one of the most popular validations libraries for vue - Vee-Validate It has good documentation and it's pretty easy to use.
import Vue from 'vue'
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)
For detailed usage please see Vee Validate documentation We will go through the code from the LoginForm.vue from Validation Forms to understand how validations work.
Here is the full template for that specific component.
Login Form
The main things you need to notice are
- Each field has a
name
attribute which will be the name of the validation property. - Each field has a
v-validate
attribute which will contain validation rules for that specific field. - Each field has a text block below the input displaying errors. (In case of
base-input
component the text block is displayed with the help oferror
prop)
The javascript for this template is the following
export default {
data () {
return {
model: {
email: '',
password: ''
},
modelValidations: {
email: {
required: true,
email: true
},
password: {
required: true,
min: 5
}
}
}
},
methods: {
getError (fieldName) {
return this.errors.first(fieldName)
},
validate () {
this.$validator.validateAll().then(isValid => {
this.$emit('on-submit', this.registerForm, isValid)
})
}
}
}
Vee-validate basically works by linking name
attributes and v-validate
directives to an errors
object which is injected
and available in each component.
You can check out available validations from vee-validate.
Working example
Login Form
You can check more examples inside @/components/Dashboard/Forms/ValidationForms/ There are some forms which have validations declared in a similar way