Comparing Vue 3 form validation libraries: Vuelidate vs. FormKit

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.

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.

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.