Vuelidate — Forms, Related Fields, and Nested Fields Validation

Photo by Karen Ciocca on Unsplash

Vue.js doesn’t come with any form validation capabilities by default.

Therefore, we need to add our own form validation library or with our own code.

In this article, we’ll look at how to validate forms with Vuelidate.

Form Submission

We can check a form’s validity before submission with Vuelidate.

To do this, we can check the $invalid state before sending any requests.

For example, we can write:

<template>
  <div id="app">
    <form @submit.prevent="submit">
      <div :class="{ 'form-group--error': $v.name.$error }">
        <label>Name</label>
        <input v-model.trim="$v.name.$model">
        <div v-if="!$v.name.required">Field is required</div>
        <div
          v-if="!$v.name.minLength"
        >Name must have at least {{$v.name.$params.minLength.min}} letters.</div>
      </div>
      <div :class="{ 'error': $v.age.$error }">
        <label>Age</label>
        <input v-model.trim.lazy="$v.age.$model">
        <div
          class="error"
          v-if="!$v.age.between"
        >Must be between {{$v.age.$params.between.min}} and {{$v.age.$params.between.max}}</div>
      </div>
      <input type="submit" value="submit">
    </form>
  </div>
</template>
<script>…