Guides

Comparing Vue 3 form validation libraries: Vuelidate vs. FormKit

Nefe James

Nefe is a frontend developer who enjoys learning new things and sharing his knowledge with others.

Published on

June 13, 2022
Comparing Vue 3 form validation libraries: Vuelidate vs. FormKit

Forms are a vital aspect of web development because they enable users to interact with websites and web applications.

As web developers, it is our job to ensure that we validate the data the users send to us. The demands of handling forms can quickly become complex, repetitive, and strenuous because we have to track the user input, validate the data, display any errors, handle the form submission, and more.

Lucky for us, we can use form libraries to make the job of handling forms easier; they do the heavy lifting for us, so we don’t have to.

This article will compare two Vue form libraries, Vuelidate and FormKit. We will compare how to integrate these libraries into input fields, how they handle validation and submission, and more.

Prerequisites

Knowledge of Vue is required for this article.

What is FormKit?

FormKit is the one-stop solution for high-end forms in Vue.js applications. It includes everything needed — labels, helper text, theming support, validation, form generation from JSON, accessibility, internationalization, and more!

What is Vuelidate?

Vuelidate is a simple, lightweight model-based form validation library. It is data-model oriented, meaning validation rules are added to a `validations` object in the component definition rather than being added directly to input elements in the DOM.

Comparing the Form Libraries

1. Installation

FormKit

Run the command below to install FormKit:

npm install @formkit/vue

Vuelidate

Run the command below to install Vuelidate:

npm install @vuelidate/core

2. Implementation

FormKit

FormKit provides a FormKit component we can use to create text fields, email inputs, select boxes, and other types of form elements. FormKit works the same way native HTML form elements work.

<template>
  <FormKit type="form" submit-label="Register">
  <FormKit type="text" name="name" label="Name" />
  <FormKit type="email" name="email" label="Email" />
  </FormKit>
</template>

Vuelidate

Unlike FormKit, Vuelidate does not provide any custom elements, so we set up forms in Vuelidate using regular HTML form elements.
To get the inputs connected to the data, we will use a v-model on each input corresponding to their respective data.

<template>
  <div class="root">
    <input type="text" name="name" placeholder="name" v-model="name" />
    <input type="email" name="email" placeholder="Email" v-model="email" />
    <button>Submit</button>
  </div>
</template>

export default {
  data() {
    return {
      name: "",
      email: "",
    };
  },
};

3. Form Validation

FormKit

Validation in FormKit is straightforward to work with. FormKit comes with pre-written validation rules, which we can declare in the FormKit component through its validation prop.

As of this writing, there are 22 pre-written rules available.

Not only does FormKit provide a developer-friendly API for handling validation, but it also handles the tracking and displaying of errors for us.

<template>
  <FormKit type="form" submit-label="Register">
    <FormKit name="name" validation="required" />
    <FormKit name="email" validation="required|email" />
  </FormKit>
</template>

Vuelidate

Unlike FormKit, Vuelidate separates its validation package from its core package, so we need to install it to validate forms.

npm install @vuelidate/validators

Similar to FormKit, Vuelidate comes with several built-in validators. Some of the basics include:

- required – value cannot empty
- minLength/maxLength – provides a min or max length for a value
- email – value must be a valid email address format
- alpha – value only accepts the alphabet
- numeric – value only accepts numbers

With Vuelidate, we are responsible for tracking and conditionally displaying the errors that exist on each input field.

<template>
  <div class="root">
    <input type="text" name="name" placeholder="name" v-model="name" />
    <span v-if="v$.name.$error">
        {{ v$.name.$errors[0].$message }}
    </span>
      
    <input type="email" name="email" placeholder="Email" v-model="email" />
    <span v-if="v$.email.$error">
        {{ v$.email.$errors[0].$message }}
    </span>
      
    <button @click="submitForm">Submit</button>
  </div>
</template>

export default {
  data() {
    return {
      v$: useValidate(),
      name: "",
      email: "",
    };
  },
  
  validations() {
    return {
      name: { required },
      email: { required },
    };
  },
};

4. Form Submission

FormKit

The parent FormKit component tracks the validation state of its children's input fields and ensures they are all valid before submitting. It also disables all inputs while the submission is pending.

You will notice that there is no submit button in the template; this is because FormKit comes with a submit-label attribute we can pass a value to. When we do that, it will automatically render a submit button for us.  

There is no submit button in the template because FormKit comes with a submit-label attribute to which we can pass a value. It will automatically render a submit button for us when we do that.

<template>
  <FormKit type="form" submit-label="Register" @submit="submitHandler">
    <FormKit name="name" validation="required" />
    <FormKit name="email" validation="required|email" />
  </FormKit>
</template>

<script>
function submitHandler(values) {
  //do something with the form data
  console.log(values);
}
</script>
<!-- the console.log output
{ name: "John Doe", email: "johndoe@yahoo.com" }
-->

Vuelidate

Unlike FormKit, we have to add a submit button to the template explicitly. Also, Vuelidate does not automatically track the submission state, so we must attach a click event to the submit button.

Vuelidate does not track if there are errors present, so we have to check if there are any errors in the submitForm.

<template>
  <div class="root">
    <input type="text" name="name" placeholder="name" v-model="name" />
    <input type="email" name="email" placeholder="Email" v-model="email" />
    <button @click="submitForm">Submit</button>
  </div>
</template>

export default {
  data() {
    return {
      v$: useValidate(),
      name: "",
      email: "",
    };
  },
  
  methods: {
    submitForm() {
      this.v$.$validate(); // checks all inputs
      if (!this.v$.$error) {
        // if ANY fail validation
        alert("Form successfully submitted.");
      } else {
        alert("Form failed validation");
      }
    },
  },
  
  validations() {
    return {
      name: { required },
      email: { required },
    };
  },
};

5. Popularity and Library Maturity

FormKit

FormKit is a relatively new library, which was recently released, and as of this writing, it is currently in a public beta. We may want to consider this before deciding to integrate FormKit into our projects.

Also, being a new library, FormKit is not yet well-known in the Vue community. This means that we may not see much developer-related content such as YouTube videos, blog posts, or code snippet demos like we would see with popular libraries.

Vuelidate

Compared to FormKit, Vuelidate is a well-established library, having been released for years. It is popular among web developers in the Vue ecosystem, and developers have created a lot of content for it.

Also, as a mature library, it has been battle-tested in production-grade applications.

6. Documentation and Learning Curve

FormKit

FormKit has detailed and efficient documentation, which is also easy to navigate.

The documentation covers several use-cases and provides real-world examples.

Also, the documentation comes with a built-in editor which we can interact with; this makes it easier to learn FormKit and hit the ground running with it.

What FormKit may lack in developer-related content and popularity, it makes up for with its very detailed documentation.

Vuelidate

Vuelidate has comprehensive documentation that is easy to understand and comes with several examples.

Also, it has been around longer than FormKit, which means it has more content in the form of blog posts, YouTube videos, and other developer-generated content built around it.

7. Bundle Size

FormKit

Formik is 111.1kb minified, and 30.7kb gzipped.

Image of formkit bundle size

Vuelidate is 74.6kb minified, and 26.1kb gzipped. While smaller than FormKit, this is only the core package. Together with its validate package, Vuelidate becomes 149.1kb minified and 56.8kb gzipped, which can make websites load slower.

Image of vuelidate bundle size
Image of vuelidate size with its validate package

Conclusion

Which library should you use for your next Vue application? As with a lot of questions when it comes to web development, my answer is ‘it depends.’ There is no one-size-fits-all library that will suit every use case and project.

I found FormKit to be more beginner-friendly compared to Vuelidate. Its developer-friendly API is a strong selling point, and I love the fact that it has an interactive documentation and playground. I believe these make it easier for Vue developers of every level to get started with it quickly.

Liked the article? Spread the word

Put your knowledge to practice

Try Bird on your next bug - you’ll love it

Try Bird later, from your desktop

Bird Call to action parrot
By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.