VeeValidate is useful for Vue.js frontend validation

April 26, 2018 0 Comments

VeeValidate is useful for Vue.js frontend validation

 

 



I found an article about Validatorjs (Japanese) and tried to use it in my current project, but failed.

The reason is that I had to create complex frontend implementing the following requirements:


  • Given 1:n data structure, user can dynamically add elements (e.g. multiple email)

  • Do not run validation after page loaded

    • After user started to input, validate only the element user is interacting




  • Run validation before submitting a form.

    • change the style of the element




  • Show an error message just next to the element like "email address is required."



  • Validation rule should be at one place, using the same logic between input and submit.

Then I found VeeValidate.

(I wrote this article originally on April 2017. In my memory at that time VeeValidate had less than 1,000 stars, but now more than 4,000 stars. It is rapidly getting popular.)

https://github.com/logaretm/vee-validate

I would like to introduce this Great library.

Simple validation

Suppose that there is an email form and we want to run validation in the following timing:


  • after user input

  • before submitting the form

out.gif

The code will be like this:

 
// VeeValidationSimple.vue <template> <div> <input name="email" v-model="email" v-validate="'required|email'" :class="{'has-error': errors.has('email')}" > <p v-if="errors.has('email')" class="alert-danger"> {{ errors.first('email') }} </p> <button @click="register">Register</button> </div> </template> <script>
import Vue from 'vue'
import VeeValidate from 'vee-validate' Vue.use(VeeValidate) export default { data () { return { email: '' } }, methods: { register () { this.$validator.validateAll().then(() => { alert('Hello, ' + this.email) }).catch(() => { alert(this.errors.all()) }) } }
}
</script> <style>
.alert-danger { color: red;
}
.has-error { border-color: red;
}
</style>

Promise makes the code readable.

I personally prefer that <input> element has validation rules, because validation is an UI logic.

Multiple element validation

Multiple element validation is also easy than I expected.

Assume user can add other emails like this:

out.gif

VeeValidate recognize elements by name attribute, so we set unique name attribute to each element. Just iteration number is OK.

 
// VeeValidationMultiple.vue <template> <div> <!-- set unique name --> <div v-for="(account, i) in accounts"> <input :name="'email' + i" v-model="account.email" v-validate="'required|email'" :class="{'has-error': errors.has('email' + i)}" > <p v-if="errors.has('email' + i)" class="alert-danger"> {{ errors.first('email' + i) }} </p> </div> <p> <button @click="addAccount">Add Account</button> <button @click="register">Register</button> </p> </div> </template> <script>
import Vue from 'vue'
import VeeValidate from 'vee-validate' Vue.use(VeeValidate) export default { data () { return { // v-for need Object array accounts: [{ email: '', }], } }, methods: { addAccount () { this.accounts.push({ email: '', }) }, register () { this.$validator.validateAll().then(() => { alert('Hello, ' + this.accounts) }).catch(() => { alert(this.errors.all()) return false }) } },
}
</script> <style>
.alert-danger { color: red;
}
.has-error { border-color: red;
}
</style>

Validation for the element added by user interaction works well.

Refs

VeeValidate has a great documentation. We can found validation rules easily.

Here is the source code of this article uses.

https://github.com/acro5piano/vue-cli-test/blob/master/src/components/VeeValidation.vue


Tag cloud