Fast Form Validation Library - vue-composition-form

Install & Download:

# NPM
$ npm i @vue-composition-form/core@beta

Description:

A fast and customizable form validator for Vue 3, based on Composition API.

How to use it:

1. Import the vue-composition-form.

// app.vue
import { watch } from 'vue';
import { useForm } from '@vue-composition-form/core';

2. Enable the form validation on your HTML form.

<template>
  <form @submit="handleSubmit">
    <div class="field">
      <input
        v-model="password"
        type="password"
        class="field__input"
        placeholder="Password"
        v-bind="passwordAttrs"
      />
      <div class="field__error">
        {{ errors.password }}
      </div>
    </div>
    <div class="field">
      <input
        v-model="confirmPassword"
        type="password"
        class="field__input"
        placeholder="Confirm Password"
        v-bind="confirmPasswordAttrs"
      />
      <div class="field__error">
        {{ errors.confirmPassword }}
      </div>
    </div>
    <div class="field">
      <input type="submit" />
    </div>
  </form>
</template>

const { values, register, errors, handleSubmit, validateField } = useForm({
  initialValues: {
    password: '',
    confirmPassword: '',
  },
  onSubmit(values) {
    alert('success');
  },
});
const { value: password, attrs: passwordAttrs } = register('password', {
  validate(value) {
    if (!value) {
      return 'Password is required!!!';
    }
  },
});
const { value: confirmPassword, attrs: confirmPasswordAttrs } = register(
  'confirmPassword',
  {
    validate(value) {
      if (value !== values.password) {
        return 'The password confirmation does not match';
      }
    },
  }
);
watch(
  () => [confirmPassword.value, password.value],
  () => {
    validateField('confirmPassword');
  }
);

3. Possible useForm options.

export interface UseFormOptions<Values extends FormValues> {
  initialValues: Values;
  initialErrors?: FormErrors<Values>;
  validateMode?: ValidateMode;
  reValidateMode?: ValidateMode;
  validateOnMounted?: boolean;
  onSubmit: (values: Values, helper: FormSubmitHelper) => void | Promise<any>;
  onError?: (errors: FormErrors<Values>) => void;
  validate?: (values: Values) => void | object | Promise<FormErrors<Values>>;
}