Dynamic Form Validation Library For Vue 3

A dynamic form validation library for Vue 3 app that supports custom validation rules.

Basic usage

1. Import the form validation component.

import { useValidation, ValidationError } from "vue3-form-validation";

2. This example shows how to validate fields in a signup form.

<template>
  <h1>Register Form</h1>
  <form class="form" @submit.prevent="handleSubmit()">
    <BaseInput
      class="name"
      label="Name"
      v-model="form.name.$value"
      :errors="form.name.$errors"
      :validating="form.name.$validating"
      @blur="form.name.$onBlur()"
      placeholder="Alice, Bob, Oscar"
    />
    <BaseInput
      class="e-mail"
      label="Email address"
      v-model="form.email.$value"
      :errors="form.email.$errors"
      @blur="form.email.$onBlur()"
    />
    <BaseInput
      class="password"
      label="Password"
      type="password"
      v-model="form.password.$value"
      :errors="form.password.$errors"
      @blur="form.password.$onBlur()"
    />
    <BaseInput
      class="confirm-password"
      label="Confirm Password"
      type="password"
      v-model="form.confirmPassword.$value"
      :errors="form.confirmPassword.$errors"
      @blur="form.confirmPassword.$onBlur()"
    />
    <BaseButton
      class="signup"
      type="primary"
      htmlType="submit"
      :disabled="submitting"
    >
      Register
    </BaseButton>
    <BaseButton class="reset" @click="resetFields()">Reset</BaseButton>
  </form>
  <PreFormData :form="form" :errors="errors" />
</template>

export default {
  components: { BaseInput, BaseButton, PreFormData },
  setup() {
    const password = ref("");
    const confirmPassword = ref("");
    const {
      form,
      errors,
      submitting,
      validateFields,
      resetFields
    } = useValidation({
      name: {
        $value: "",
        $rules: [
          required("Name is required"),
          min(3)("Name has to be longer than 2 characters"),
          name =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                if (["alice", "bob", "oscar"].includes(name.toLowerCase())) {
                  resolve();
                } else {
                  // Resolve or reject with a string
                  resolve("This name is already taken");
                }
              }, 2000);
            })
        ]
      },
      email: {
        $value: "",
        $rules: [email("Please enter a valid email address")]
      },
      password: {
        $value: password,
        $rules: [
          min(7)("Password has to be longer than 7 characters"),
          {
            key: "pw",
            rule: () =>
              password.value === confirmPassword.value ||
              "Passwords do not match"
          }
        ]
      },
      confirmPassword: {
        $value: confirmPassword,
        $rules: [
          min(7)("Password has to be longer than 7 characters"),
          {
            key: "pw",
            rule: () =>
              password.value === confirmPassword.value ||
              "Passwords do not match"
          }
        ]
      }
    });
    const handleSubmit = async () => {
      try {
        const formDate = await validateFields();
        alert(JSON.stringify(formDate, null, 2));
      } catch (e) {
        if (e instanceof ValidationError) {
          console.log(e.message);
        }
      }
    };
    return {
      form,
      errors,
      submitting,
      handleSubmit,
      resetFields
    };
  }
};

Preview:

Changelog:

v5.1.0 (12/11/2021)

• This release removes all default validation behaviors. To not force any unwanted names, VBFs need to be implemented manually now.

v5.0.7 (12/09/2021)

• Make sure to throw an ValidationError when the form is changed during validation

v5.0.6 (11/22/2021)

• Include force and change as default validation behavior

v5.0.5 (11/20/2021)

• Exported type TransformedFormData renamed to TransformFormData.

v5.0.4 (11/14/2021)

• Fixes a bug with remove

v5.0.3 (11/13/2021)

• Made some internal improvements.

v5.0.2 (10/31/2021)

• Fixes a bug with debounced rules in combination with resetFields.

v5.0.1 (10/28/2021)

• update

v5.0.0(10/26/2021)

• allow arbitrary properties on field
• add debounce option to field rule
• More freedom in validation behavior
• deepIterator now returns an object instead of an array

v4.1.1 (08/11/2021)

• Use rollup.js for bundling and include CommonJs source.

v4.1.0 (08/09/2021)

• expose form fields in composition function

v4.0.4 (07/09/2021)

• removed json copy

v4.0.2 (06/04/2021)

• fix: $validating set false too early for multiple async rules

v4.0.1 (06/01/2021)

• update

v3.3.6 (05/31/2021)

• reject correctly with ValidationError

v3.3.5 (05/30/2021)

• types: exclude arrays from FieldNames

v3.3.4 (05/29/2021)

• type definition for validateFields

v3.3.3 (05/29/2021)

• Ability to pass field names to validateFields
• Allow undefined keyed rules

Download Details:

Author: JensDll

Live Demo: https://codesandbox.io/s/vue-3-form-validation-demo-7mp4z?file=/src/views/SignupForm.vue

Download Link: https://github.com/JensDll/vue3-form-validation/archive/refs/heads/master.zip

Official Website: https://github.com/JensDll/vue3-form-validation

Install & Download:

# NPM
$ npm i vue3-form-validation --save