npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-use-form-validation

v0.11.2

Published

[![NPM Version](https://badgen.net/npm/v/vue-use-form-validation)](https://www.npmjs.com/package/vue-use-form-validation) [![Monthly Downloads](https://badgen.net/npm/dm/vue-use-form-validation)](https://www.npmjs.com/package/vue-use-form-validation) [![T

Downloads

1,112

Readme

Vue 3 Form Validation Composable

NPM Version Monthly Downloads Types Licence CI Coverage

A Vue 3 composable library for form validation, compatible with Zod, Yup, Joi, Valibot, and Superstruct. This library allows for seamless validation of forms and supports custom validation through a transformation function.

Features

  • ⚡️ Compatibility: Natively supports Zod, Yup, Joi, Valibot, and Superstruct.
  • 🧩 Type Safety: Strongly typed with TypeScript, ensuring compile-time validation and reducing runtime errors.
  • 💨 Bundle Size: Small bundle size (<3kb).
  • 📦 Zero Dependencies: No dependencies.
  • ✅ Custom Validation: Compatible with any other validation libraries using transformFn.
  • ⚙️ Customizable Validation Modes: Offers eager, lazy, agressive and onBlur validation modes to fit different user experience needs.
  • 🔗 Reactive Integration: Fully integrates with Vue’s reactivity system, providing a seamless experience when working with reactive form states.
  • 📈 Performance Optimized: Efficiently handles validation with minimal performance overhead, making it suitable for large forms.
  • 📅 Easy Integration: Simple to integrate with existing Vue 3 projects, requiring minimal setup to start validating forms.

Installation

To install the library, run:

npm install vue-use-form-validation

Usage

Importing the Composable

import { useFormValidation } from 'vue-use-form-validation'

Types

// Import types for better TypeScript support
import type { FieldErrors, Form, GetErrorsFn, InputSchema, ReturnType } from './types'

Basic Example

This example shows how to use vue-use-form-validation with Zod for validation. However, you can use other validation libraries like Yup, Joi, Valibot, or Superstruct by adjusting the validation logic accordingly.

import { ref } from 'vue'
import { useFormValidation } from 'vue-use-form-validation'
import * as z from 'zod'

// Define your schema
const schema = z.object({
  field1: z.string().min(1, 'field1 is required'),
  field2: z.string().email('Invalid field2'),
})

// Create a reactive form
const form = ref({
  field1: '',
  field2: '',
})

// Initialize the form validation
const {
  validate,
  errors,
  isValid,
  errorCount,
  clearErrors,
  getErrorMessage,
  focusFirstErroredInput,
} = useFormValidation(schema, form)

// Submit your form
async function onSubmit() {
  await validate()
  if (!isValid.value) {
    console.log(errors.value)
    focusFirstErroredInput()
  }
}

Options

const options = {
  mode: 'eager', // or 'lazy' or 'agressive' or 'onBlur'
  transformFn: (schema: InputSchema, form: Form) => {
    // Custom validation logic
    return {} // Return errors if any
  },
}

const { validate } = useFormValidation(schema, form, options)

Methods

  • validate(): Triggers the validation process.
  • clearErrors(): Resets the validation errors.
  • getErrorMessage(path: keyof F): Retrieves the error message for a specific field.
  • focusFirstErroredInput(): Focuses the first input with an error.
  • focusInput(inputName: keyof F): Focuses a specific input by its name.

API Reference

declare function useFormValidation<S extends InputSchema<F>, F extends Form>(
  schema: S,
  form: MaybeRefOrGetter<F>,
  options?: {
    mode?: 'eager' | 'lazy' | 'agressive' | 'onBlur' // lazy by default
    transformFn?: GetErrorsFn<S, F>
  }
): ReturnType<F>

Parameters

  • schema: The validation schema.
  • form: The reactive form object.
  • options: Optional configuration object.
    • mode: (optional) Validation mode ('eager' for immediate validation,'agressive' for validation on load, 'lazy' for validation on form changes or 'onBlur' for validation on input blur).
    • transformFn: (optional) A transformation function that can be used when integrating a different validation library. It allows you to transform data before it is validated. Use this option only if you are integrating another validation library that requires specific data handling.

Return Value

Returns an object containing the following properties:

  • validate: Function to validate the form.
  • errors: Reactive reference to the current validation errors.
  • isValid: Reactive reference indicating whether the form is valid.
  • isLoading: Reactive reference indicating if the form validation is in progress.
  • errorCount: Reactive reference to the number of errors.
  • clearErrors: Function to clear validation errors.
  • getErrorMessage: Function to get the error message for a specific field.
  • focusFirstErroredInput: Function to focus the first input with an error.
  • focusInput: Function to focus a specific input.

Example

Refer to the playground folder for comprehensive use cases that demonstrate the functionality and usage of the composable.

License

MIT License