Contents

    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.

    Data-rich bug reports loved by everyone

    Get visual proof, steps to reproduce and technical logs with one click

    Make bug reporting 50% faster and 100% less painful

    Rating LogosStars
    4.6
    |
    Category leader

    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.