Vuelidate: How to install, use it for validation forms in Vue.js apps

In general, validating input fields is imperative when crafting forms to collect data from your customers. Also, form validation gives you total control of the customer experience and enables you to guide the user through the path you want them to take. So, in order to get the best out of the validation in Vue.js, you should probably know about a library called Vuelidate. This is probably one of the best when it comes to Vue development.

How to install and use Vuelidate for validation forms?
How to install and use Vuelidate for validation forms?

So, as we can see, Vuelidate should help you conduct validation on both the client and server-side of your application for quality assurance. Moreover, it helps you to achieve the one and only target: getting user input. This is crucial for many web apps, because it enables the web app to give the user a more personalized experience. So now, we would like to show you guys how to install and use it for validation forms in Vue.js apps.

But first things first, let’s start with some definitions.

What is Vuelidate?

Vuelidate, to clarify, is a simple, lightweight, model-based validation library for Vue applications. Validation rules are added to a validation object where a given component is defined (instead of directly inside the DOM). It works well with other libraries such as Moment and VueX and can be added with the add command on the Vue CLI. It also has support for collection validation, nested models, and function composition.

Things required before approaching Vuelidate

Things required before using Vuelidate
Things required before using Vuelidate

So, you can create forms in Vue applications just as you would with HTML5. That means little to no additional skills are required in order to build forms in the Vue template section of any component with plain HTML. So here are a few things you should already have:

  • Node.js version 10.x and above installed:
node -v
  • A code editor, such as Visual Studio Code
  • Vue’s latest version installed globally on your machine
  • Also, Vue CLI 3.0 installed on your machine.
  • So to do this, uninstall the old CLI version first:
npm uninstall -g vue-cli
  • Then, install the new one:
npm install -g @vue/cli
  • Download a Vue starter project
  • Unzip the downloaded project
  • Then navigate into the unzipped file and run the command below to keep all the dependencies up to date
npm install

Getting started with Vuelidate using the CLI

In order to do this, create a new Vue application in your terminal and choose the default setup. After the project has been created, navigate to the new project folder instead. Then, install Vuelidate with your package manager of choice. This, as a result, installs the library for your newapp project. The next step is to register it as a plugin so you can use it in your Vue app. So to do this, go to the main.js file inside the src directory and register it. Your main.js file should look like this:

 import Vue from 'vue'
import App from './App.vue'
import Vuelidate from "vuelidate";
Vue.use(Vuelidate);
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

Creating the form

Now that we’ve brought in the Vuelidate library and registered it as a plugin, let’s build out a simple form to see it in action. Open the app.vue file and replace the content with the code block below.

 <template>
  <div id="visa">
    <h1>Create a New Vue Account</h1>
    <form>
      <label for="full name">Full Name:</label>
      <input type="text">
      <br>
      <label for="email">Email Address:</label>
      <input type="text"> <br>
      <span></span>
<label for="password">Password:</label>
      <input type="text"><br>
      <span></span>
      <br>
      <label for="age">Age:</label>
      <input type="text">

    </form>
</div>
</template>
<script>
export default {
  name: 'app'
}
</script>

This displays a simple contact form that looks like this:

Adding validation rules

So, to set validation rules for the number of characters, you need to be present in the name and password fields. The validations option is available to you once Vuelidate is registered as a plugin. To clarify, in the script section of your app.vue file, add the code block below.

 <script>
import { required, minLength, between } from 'vuelidate/lib/validators'
export default {
  name: 'app',
  data() {
    return {
      name: '',
      password: '',
      age: ''
    }
  },
  validations: {
    name: {
      required,
      minLength: minLength(4)
    },
    password: {
      required,
      minLength: minLength(4)
    }, 
    age: {
      required,
      between: between(18,45)
    }
  }
}
</script>

First, we imported the following built-in validators for Vuelidate library:

  • minLength, which refers to the minimum number of characters for a given required input field
  • required, which points to a required input field that has to be filled before the submission is possible
  • between, which points to a range of numbers for input to be given in also

In the template section of your app.vue file, replace the current content with some blocks options. For every option, we used the v-model directive to bind the input data and also specify in spans the rules and how they are flagged. The $v selector, which is now available for use since Vuelidate has been added, makes it easy to build logic around the model.

Final words

That should be it! Here are the steps on how to install and use Vuelidate for validation forms in Vue.js apps. All in all, we went over how to handle basic form input validation with this kind of library. We also showed how to use the Vue GUI and ran through a quick overview of how it works. So, after reading this article, you should have the basic knowledge for building validation forms in Vue.js for yourself.

We – ArrowHiTech is proud to be one of the most well-established outsourcing companies all around the world. That is to say, with over 12 years of experience, we can provide the best software development services for your eCommerce business. So, you can check us out now: ArrowHiTech services. Also, if you want to go through our showcase, you should visit our product page here: MageSolution or our portfolio: ArrowHiTech portfolio.

ArrowHiTech services

If you have any questions, don’t hesitate to contact us via email support@arrowhitech.com or our phone number +84 243 7955 813. We would love to hear every feedback from you guys.