Welcome folks today in this blog post we will be validating form controls in vue.js using veevalidate library. All the source code of the examples will be given below.
Installation
|
1 2 3 4 5 |
<span class="token comment" data-v-7b9e6800=""># install with yarn</span> <span class="token function" data-v-7b9e6800="">yarn</span> <span class="token function" data-v-7b9e6800="">add</span> vee-validate@next <span class="token comment" data-v-7b9e6800=""># install with npm</span> <span class="token function" data-v-7b9e6800="">npm</span> <span class="token function" data-v-7b9e6800="">install</span> vee-validate@next --save |
Or use a CDN
|
1 2 |
<span class="token tag" data-v-7b9e6800=""><span class="token punctuation" data-v-7b9e6800=""><</span>script <span class="token attr-name" data-v-7b9e6800="">src</span><span class="token attr-value" data-v-7b9e6800=""><span class="token punctuation attr-equals" data-v-7b9e6800="">=</span><span class="token punctuation" data-v-7b9e6800="">"</span>https://unpkg.com/vee-validate@next<span class="token punctuation" data-v-7b9e6800="">"</span></span><span class="token punctuation" data-v-7b9e6800="">></span></span><span class="token tag" data-v-7b9e6800=""><span class="token punctuation" data-v-7b9e6800=""></</span>script<span class="token punctuation" data-v-7b9e6800="">></span></span> |
Usage
Register the Field and Form components and create a simple required validator:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<span class="token keyword module" data-v-7b9e6800="">import</span> <span class="token imports" data-v-7b9e6800=""><span class="token punctuation" data-v-7b9e6800="">{</span> <span class="token maybe-class-name" data-v-7b9e6800="">Field</span><span class="token punctuation" data-v-7b9e6800="">,</span> <span class="token maybe-class-name" data-v-7b9e6800="">Form</span> <span class="token punctuation" data-v-7b9e6800="">}</span></span> <span class="token keyword module" data-v-7b9e6800="">from</span> <span class="token string" data-v-7b9e6800="">'vee-validate'</span><span class="token punctuation" data-v-7b9e6800="">;</span> <span class="token keyword module" data-v-7b9e6800="">export</span> <span class="token keyword module" data-v-7b9e6800="">default</span> <span class="token punctuation" data-v-7b9e6800="">{</span> components<span class="token operator" data-v-7b9e6800="">:</span> <span class="token punctuation" data-v-7b9e6800="">{</span> <span class="token maybe-class-name" data-v-7b9e6800="">Field</span><span class="token punctuation" data-v-7b9e6800="">,</span> <span class="token maybe-class-name" data-v-7b9e6800="">Form</span><span class="token punctuation" data-v-7b9e6800="">,</span> <span class="token punctuation" data-v-7b9e6800="">}</span><span class="token punctuation" data-v-7b9e6800="">,</span> methods<span class="token operator" data-v-7b9e6800="">:</span> <span class="token punctuation" data-v-7b9e6800="">{</span> <span class="token comment" data-v-7b9e6800="">// Validator function</span> <span class="token function" data-v-7b9e6800="">isRequired</span><span class="token punctuation" data-v-7b9e6800="">(</span><span class="token parameter" data-v-7b9e6800="">value</span><span class="token punctuation" data-v-7b9e6800="">)</span> <span class="token punctuation" data-v-7b9e6800="">{</span> <span class="token keyword control-flow" data-v-7b9e6800="">return</span> value <span class="token operator" data-v-7b9e6800="">?</span> <span class="token boolean" data-v-7b9e6800="">true</span> <span class="token operator" data-v-7b9e6800="">:</span> <span class="token string" data-v-7b9e6800="">'This field is required'</span><span class="token punctuation" data-v-7b9e6800="">;</span> <span class="token punctuation" data-v-7b9e6800="">}</span><span class="token punctuation" data-v-7b9e6800="">,</span> <span class="token punctuation" data-v-7b9e6800="">}</span><span class="token punctuation" data-v-7b9e6800="">,</span> <span class="token punctuation" data-v-7b9e6800="">}</span><span class="token punctuation" data-v-7b9e6800="">;</span> |
Then use the Form and Field components to render your form:
|
1 2 3 4 5 |
<span class="token tag" data-v-7b9e6800=""><span class="token punctuation" data-v-7b9e6800=""><</span>Form <span class="token attr-name" data-v-7b9e6800="">v-slot</span><span class="token attr-value" data-v-7b9e6800=""><span class="token punctuation attr-equals" data-v-7b9e6800="">=</span><span class="token punctuation" data-v-7b9e6800="">"</span>{ errors }<span class="token punctuation" data-v-7b9e6800="">"</span></span><span class="token punctuation" data-v-7b9e6800="">></span></span> <span class="token tag" data-v-7b9e6800=""><span class="token punctuation" data-v-7b9e6800=""><</span>Field <span class="token attr-name" data-v-7b9e6800="">name</span><span class="token attr-value" data-v-7b9e6800=""><span class="token punctuation attr-equals" data-v-7b9e6800="">=</span><span class="token punctuation" data-v-7b9e6800="">"</span>field<span class="token punctuation" data-v-7b9e6800="">"</span></span> <span class="token attr-name" data-v-7b9e6800="">:rules</span><span class="token attr-value" data-v-7b9e6800=""><span class="token punctuation attr-equals" data-v-7b9e6800="">=</span><span class="token punctuation" data-v-7b9e6800="">"</span>isRequired<span class="token punctuation" data-v-7b9e6800="">"</span></span> <span class="token punctuation" data-v-7b9e6800="">/></span></span> <span class="token tag" data-v-7b9e6800=""><span class="token punctuation" data-v-7b9e6800=""><</span>span<span class="token punctuation" data-v-7b9e6800="">></span></span>{{ errors.field }}<span class="token tag" data-v-7b9e6800=""><span class="token punctuation" data-v-7b9e6800=""></</span>span<span class="token punctuation" data-v-7b9e6800="">></span></span> <span class="token tag" data-v-7b9e6800=""><span class="token punctuation" data-v-7b9e6800=""></</span>Form<span class="token punctuation" data-v-7b9e6800="">></span></span> |
VeeValidate Email Validator
Now we will look at a basic email validator where we will be checking whether the user has entered a valid email or not
basic.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<template> <div class="column is-12"> <label class="label" for="email">Email</label> <p :class="{ 'control': true }"> <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email"> <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span> </p> </div> </template> <script> export default { name: 'basic-example' }; </script> |
As you can see i received a error message because i entered an invalid email i.e. @ symbol is missing inside the email
VeeValidate Checkbox Validator
Now in the example we will be seeing the agree terms of conditions validator in the form of checkbox as shown below
checkbox.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<template> <div> <div class="terms"> <p> {{ terms }} </p> </div> <div> <p class="control"> <label class="checkbox"> <input name="terms" v-validate="'required'" type="checkbox"> I agree to the terms and conditions. </label> <span class="help is-danger" v-show="errors.has('terms')">{{ errors.first('terms') }}</span> </p> </div> <p class="control"> <button type="button" class="button is-primary" @click="nextStep">Next</button> </p> </div> </template> <script> const terms = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit '; export default { name: 'checkbox-example', data: () => ({ terms: terms.repeat(20) }), methods: { nextStep() { this.$validator.validateAll().then((result) => { if (result) { alert('You just agreed to conditions without reading it.'); return; } // eslint-disable-next-line alert('You actually did not agree?'); }); } } }; </script> <style lang="stylus"> .terms background-color: #e6e6e6 overflow: auto height: 200px width: 100% margin-bottom: 20px </style> |
VeeValidate Delayed Validation
Now we will be see how to validate the form controls by some time delay
delay.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<template> <div class="columns is-multiline"> <div class="column is-12"> <label class="label">Email (1s delay)</label> <p class="control has-icon has-icon-right"> <input name="email" v-validate="'required|email'" data-vv-delay="1000" :class="{'input': true, 'is-danger': errors.has('email') }" type="text" placeholder="Email"> <i v-show="errors.has('email')" class="fa fa-warning"></i> <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span> </p> </div> <div class="column is-12"> <label class="label">Name (0.5s delay)</label> <p class="control has-icon has-icon-right"> <input name="name" v-validate="'required|alpha'" data-vv-delay="500" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="Name"> <i v-show="errors.has('name')" class="fa fa-warning"></i> <span v-show="errors.has('name')" class="help is-danger">{{ errors.first('name') }}</span> </p> </div> </div> </template> <script> export default { name: 'delay-example' }; </script> |
VeeValidate Flag Example
Here we will see different flags validators supported by veevalidate
flags.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<template> <div class="columns is-multiline"> <div class="column is-12"> <label class="label">Name</label> <p class="control has-icon has-icon-right"> <input name="name" v-validate="'required|alpha'" :class="{'input': true }" type="text" placeholder="Name"> </p> <pre>{{ nameFlags }}</pre> </div> </div> </template> <script> import { mapFields } from 'vee-validate'; export default { name: 'flags-example', data: () => ({ email: '' }), computed: { ...mapFields({ nameFlags: 'name' }) } }; </script> |
VeeValidate Localization Validator
Now we will be looking on how to change the locale of the validator as shown below
locale.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<template> <div> <div class="column is-12"> <label class="label">البريد الاليكتروني (Email)</label> <p class="control has-icon has-icon-left"> <input name="email" v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" type="text" placeholder="Email"> <i v-show="errors.has('email')" class="fa fa-warning"></i> <span v-show="errors.has('email')" class="help is-danger has-text-right">{{ errors.first('email') }}</span> </p> </div> <div class="column is-12"> <label class="label">رقم الهاتف (Phone)</label> <p class="control has-icon has-icon-left"> <input name="phone" v-validate="'required|numeric'" :class="{'input': true, 'is-danger': errors.has('phone') }" type="text" placeholder="Phone"> <i v-show="errors.has('phone')" class="fa fa-warning"></i> <span v-show="errors.has('phone')" class="help is-danger has-text-right">{{ errors.first('phone') }}</span> </p> </div> <div class="column is-12"> <p class="control"> <button @click="changeLocale" type="button" class="button is-primary">Change Locale To {{ nextLocale }}</button> </p> </div> </div> </template> <script> import arabic from 'vee-validate/dist/locale/ar'; export default { name: 'locale-example', data: () => ({ email: '', phone: '', locale: 'en', }), computed: { nextLocale() { return this.locale === 'en' ? 'Arabic' : 'English'; } }, methods: { changeLocale() { this.locale = this.$validator.locale === 'ar' ? 'en' : 'ar'; this.$validator.localize(this.locale); } }, watch: { $route () { // make sure we revert to english if the user navigated away. this.$validator.localize('en'); } }, created() { this.$validator.localize('ar', { messages: arabic.messages, attributes: { email: 'البريد الاليكتروني', phone: 'رقم الهاتف' } }); // start with english locale. this.$validator.localize('en'); } }; </script> |
VeeValidate Radiobutton Validator
Now we will be looking on how to validate radiobutton validator
radiobutton.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<template> <form @submit.prevent="validateForm"> <div class="columns is-multiline"> <div class="column is-6"> <legend :class="{ 'error': errors.has('radio_group_1') }">Radio Group 1</legend> <p class="control"> <label class="radio"> <input name="radio_group_1" v-validate="'required|included:1,2'" value="1" type="radio"> Option 1 </label> <label class="radio"> <input name="radio_group_1" value="2" type="radio"> Option 2 </label> <label class="radio"> <input name="radio_group_1" value="3" type="radio"> Option 3 </label> </p> <span class="help is-danger" v-show="errors.has('radio_group_1')">{{ errors.first('radio_group_1') }}</span> </div> <div class="column is-6"> <legend :class="{ 'error': errors.has('radio_group_2') }">Radio Group 2 (Bound)</legend> <p class="control"> <label class="radio"> <input v-model="radio_group_2" v-validate="'required|included:1,2'" name="radio_group_2" value="1" type="radio"> Option 1 </label> <label class="radio"> <input v-model="radio_group_2" name="radio_group_2" value="2" type="radio"> Option 2 </label> <label class="radio"> <input v-model="radio_group_2" name="radio_group_2" value="3" type="radio"> Option 3 </label> </p> <span class="help is-danger" v-show="errors.has('radio_group_2')">{{ errors.first('radio_group_2') }}</span> </div> </div> <p class="control"> <button type="submit" class="button is-primary" name="button">Apply</button> </p> </form> </template> <script> export default { name: 'radio-buttons-example', data: () => ({ radio_group_2: '', }), methods: { validateForm() { this.$validator.validateAll().then((result) => { if (result) { // eslint-disable-next-line alert('All Passes!'); return; } alert('Oh NO!'); }); } } }; </script> |
Official Github Repository
