#vuecember2020 #frontend #javascript #vuejs

VeeValidate

Forms sometimes feel like different USB formats: Some are intuitive, but many require three rotations until they finally fit.

To solve this problem for users and developers, some libraries have been established in the Vue universe. Among them is VeeValidate, which we would like to introduce to you.

VeeValidate 3

In the third version the validation rules can be registered globally, this could look as below:

import %7B extend %7D from 'vee-validate'

// We extend the ruleset of VeeValidate
// by calling the "extend" function.
extend('min', %7B
  // With the parameter "params" we can specify,
  // which values should be passed into the "validate" function.
  params: ['length'],
  // With the parameter "message" we can display an easy
  // understandable error message.
  message: 'The %7B_field_%7D field must have at least %7Bmin%7D characters',
  validate(value, params) %7B
    // Here we check if the parameter "length"
    // is actually present.
    if (!params.length) %7B
      throw new Error('The "length" parameter is required, but not defined')
    %7D

    // At the end the content will be checked and validated
    return value && value.length >= params.length
  %7D
%7D)

In the Vue component we can now bind the newly defined min rule to an input element.

<template>
 <!--
  With "rules" we can bind our "min" rule to the &lt;input /&gt; 
  element. It is important that the minimum value is actually set.
  This is done by the colon, followed by a "3".
 -->
  &lt;ValidationProvider rules="min:3" v-slot="%7B errors %7D"&gt;
    &lt;input v-model="value" type="text" /&gt;
    &lt;span v-if="errors.length &gt; 0">%7B%7B errors[0] %7D%7D&lt;/span&gt;
  &lt;/ValidationProvider&gt;
&lt;/template&gt;

Once you have set up a corresponding set of rules, you can combine the rules with the pipe |. Quickly something like rules="required|min:6|email" is assembled.

VeeValidate 4

In the fourth version VeeValidate turns the pan into a composition api. At first sight the new structure is clearer! The way for simple functions is paved and the wild Laravel-like rules move into the background together with the ValidationProvider.

Let's take a look at an encapsulated input component.

&lt;template&gt;
  &lt;div&gt;
    <!-- 
      No ValidationProvider and no v-slot="%7B errors %7D" Voodoo in sight.
      You can use the given values directly.
    -->
    &lt;input type="text" v-model="value" /&gt;
    &lt;span v-if="errorMessage"&gt;%7B%7B errorMessage %7D%7D&lt;/span&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import %7B useField %7D from 'vee-validate'
import %7B createMinRule %7D from './rules/createMinRule'

const minRule = createMinRule(6)

export default %7B
  name: 'MinFieldInput',
  setup() %7B
    // The "useField" hook is called,
    // which provide access to the value and the error message.
    const %7B value, errorMessage %7D = useField('minField', minRule)

    // Last but not least, the mentioned data 
    // is made available to the template.
    return %7B
      value,
      errorMessage,
    %7D
  %7D,
%7D
&lt;/script&gt;
// Another function can be e.g. createMinRule,
// which implements the "min" function.
function createMinRule(length) %7B
  return function(value) %7B
    if (!min(value, length)) %7B
      // If a string is returned, it is a signal 
      // for VeeValidate that an error has 
      // occurred during validation.
      return `The field must have at least $%7Blength%7D characters`
    %7D

    return true
  %7D
%7D

// "min" is a simple function
// and can easily be tested by a unit test
function min(value, length) %7B
  return value.length >= length
%7D

If you are not convinced by this new structure, you can continue using the VeeValidate 3 approach in the fourth iteration. Please have a look at the official documentation and give this library a well-deserved chance.

Hot tip for developers who like to hop between Vue and React. VeeValidate accepts like Formik a yup scheme. This makes it much easier for the unfamiliar to get started.

Short summary of VeeValidate 4:

  • about 5Kb packed in gzip format
  • No dependencies
  • Tree Shakeable
  • TypeScript as language of choice
  • 25+ built-in rules
  • 45+ built-in translations
  • Nearly one million daily downloads on NPM
  • 8,000+ stars at GitHub