Vue3 validation kit

A lightweight, Laravel-inspired validation package for Vue 3. Effortlessly validate complex, nested data structures with minimal code.

Table of Contents

• Getting started
  • Advantages of using this solution
    • 🔥 Key benefits
    • 🚀 Features
  • Installation
  • Setup
• Usage
  • Validate field
  • Validate object
• Rules
  • Presence and requirement
  • Value comparison
  • Size and range
  • Data types
  • Special formats
  • List membership
  • Acceptance state
• Demo
• Example
• Faq
• License
• Other packages

Getting started

Advantages of using this solution

vue-validation-kit is a convenient and powerful package for data validation in Vue.js applications. It provides a simple and intuitive solution for form validation, inspired by the validation system of the Laravel framework, making it particularly user-friendly for developers familiar with this technology. The package allows seamless integration of validation into projects while keeping the code clean and structured.

🔥 Key benefits:

• Ease of Use An intuitive syntax, similar to Laravel, enables quick setup of validation rules with minimal effort.
• Flexibility Supports a wide range of built-in validation rules and offers the ability to create custom rules.
• Efficiency Significantly reduces the amount of code required to implement validation, making projects easier to maintain.
• Laravel-Inspired Developers working with Laravel will immediately recognize a familiar validation approach, simplifying the transition between frontend and backend.

🚀 Features:

One of the standout features of vue-validation-kit is its ability to validate deeply nested data structures without the need to write cumbersome code. The package makes it easy to handle complex objects and arrays, automatically applying validation rules to all levels of nesting. This is ideal for working with forms that contain multi-level data, such as objects with arrays or nested JSON structures.

With vue-validation-kit, you can focus on your application’s logic rather than tedious validation checks, while benefiting from a reliable and scalable tool for form handling in Vue.js.

Installation

Use yarn or npm to install the package @kolirt/vue-validation-kit.

npm install --save @kolirt/vue-validation-kit

yarn add @kolirt/vue-validation-kit

Setup

Add dependencies to your main.ts:

import { createApp } from 'vue'
import { createValidation } from '@kolirt/vue-validation-kit'
import { en } from '@kolirt/vue-validation-kit/localization'

const app = createApp({ ... })

app.use(createValidation({
  locale: 'en',
  messages: { en }
}))

app.mount('#app')

Usage

Validate field

<script setup lang="ts">
import { useForm, ValidationField, ValidationForm } from '@kolirt/vue-validation-kit'
import { required, min } from '@kolirt/vue-validation-kit/rules'
  
type Payload = {
  email: string
}

const form = useForm<Payload>(
  {
    name: null,
  },
  {
    name: [required(), min(3)]
  }
)

function send() {
  form.validate()
    .then(() => {
      console.log('Success validation')
    })
    .catch(() => {
      console.log('Error validation')
    })
}
</script>

<template>
  <ValidationForm @submit="send" :form="form">
    <ValidationField name="name" v-slot="{ fieldName, firstError }">
      <label :for="fieldName">{{ fieldName }}</label>
      <input :id="fieldName" :name="fieldName" type="text" v-model="form.payload.name"/>
      <div v-if="firstError">{{ firstError }}</div>
    </ValidationField>
  </ValidationForm>
</template>

Validate object

<script setup lang="ts">
import { useForm, ValidationField, ValidationForm } from '@kolirt/vue-validation-kit'
import { required, min } from '@kolirt/vue-validation-kit/rules'
  
type Payload = {
  city: {
    name: string
    lat: number
    lon: number
  }
}

const form = useForm<Payload>(
  {
    city: {
      name: null,
      population: null,
    }
  },
  {
    'city.name': [required(), min(3)],
    'city.population': [required()]
  }
)

function send() {
  form.validate()
    .then(() => {
      console.log('Success validation')
    })
    .catch(() => {
      console.log('Error validation')
    })
}
</script>

<template>
  <ValidationForm @submit="send" :form="form">
    <ValidationField name="city.name" v-slot="{ fieldName, firstError }">
      <label :for="fieldName">{{ fieldName }}</label>
      <input :id="fieldName" :name="fieldName" type="text" v-model="form.payload.city.name"/>
      <div v-if="firstError">{{ firstError }}</div>
    </ValidationField>

    <ValidationField name="city.population" v-slot="{ fieldName, firstError }">
      <label :for="fieldName">{{ fieldName }}</label>
      <input :id="fieldName" :name="fieldName" type="text" v-model="form.payload.city.population"/>
      <div v-if="firstError">{{ firstError }}</div>
    </ValidationField>
  </ValidationForm>
</template>

Rules

Presence and requirement

required

requiredIf

requiredIfAccepted

requiredIfDeclined

Value comparison

confirmed

same

is

greaterThan

greaterThanOrEqual

lessThan

lessThanOrEqual

Size and range

between

max

min

Data types

boolean

decimal

integer

Special formats

email

regex

url

List membership

included

notIncluded

Acceptance state

accepted

declined

Demo

Demo here

Example

Example here

FAQ

Check closed issues with FAQ label to get answers for most asked questions.

License

MIT

Other packages

Check out my other projects on my GitHub profile.