@kolirt/vue-validation-kit NPM

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

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>