Loveform is a tool that helps you build validated forms in Vue 3 without the need to handle the whole validation process yourself. This means that you no longer need to write a submit function with a huge if - else if - else chain of conditionals and a whole bunch of error variables. Just import the component you need to use, write a validation function, and voilà! Your form is production-ready!

Why Loveform?

When building forms, you can choose between using no library at all, using one of the libraries that include form validation handling as a secondary feature (like Vuetify), or using Loveform.

If you decide to use a library that includes form validation handling as a secondary feature (like Vuetify), you will probably have a Very hard time customizing what your forms look like. These libraries almost always include default styling and other features that you probably don’t want nor need.

If you decide to use Loveform, you will have the power to write fully validatable forms without having to worry about the validation chain, while being able to fully style your components however you desire

Installation

You can install this package by using npm or Yarn.

npm install loveform

or

yarn add loveform

Please note that Loveform will only work with Vue 3.

Basic Usage

The basic principle is simple: write a form as you would write an ordinary form with no validations, add some validations to the fields you want to validate, and then forget about validations and focus on the rest of your application. Here’s an example of an (unstyled) validated form:

<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';
import { LForm, LInput } from 'loveform';

const email = ref('');
const password = ref('');

const emailValidations = [
  (content: string) => !!content.trim() || 'The \'email\' field is required',
  (content: string) => content.includes('@') || 'Invalid email',
];
const passwordValidations = [
  (content: string) => content.length >= 6 || 'The password needs at least 6 characters',
  (content: string) => !content.includes('&') || 'The password can\'t include the \'&\' character',
];

const submit = async () => {
  // This will only run if the validations pass
  await axios.post('https://backend.you/signup', {
    email: email.value,
    password: password.value,
  });
};
</script>

<template>
  <LForm @submit="submit">
    <LInput
      v-model="email"
      :validations="emailValidations"
    />
    <LInput
      v-model="password"
      :validations="passwordValidations"
    />
    <button type="submit">Submit!</button>
  </LForm>
</template>

Each validation corresponds to a function that receives the value in the input and returns true (if the value of the input is correct) or an error string. Each validation will be run sequentially from the first validation of the array to the last one, and the first validation to fail will be displayed as the error.

Available Components

The available components are listed below:

• LForm: The form wrapper that validates inputs when trying to submit.
• LInput: A validatable input component.
• LTextarea: A validatable textarea component.
• LCheckbox: A checkbox type input component that plays nicely with the LCheckboxGroup component.
• LCheckboxGroup: A validatable group of LCheckbox components.

For more details & source code, You can visit Github