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.