Form Validation

by aj-geddes3f5182cfd739No license355 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 7 months ago

Implement form validation using React Hook Form, Formik, Vee-Validate, and custom validators. Use when building robust form handling with real-time validation.

Instructions onlySoftware Development

AI-generated overview

Guides implementing client-side and server-side form validation with React Hook Form, Formik, Vee-Validate and custom validators.

What it does: This skill provides instructions and reference guides for building form validation in web applications. It covers React Hook Form with TypeScript, Formik with Yup, Vue Vee-Validate, custom validator hooks, and server-side validation integration. It also includes a component template and best-practice guidance for real-time error feedback and multi-step forms.
When to use it: Use it when adding user input validation, form submission handling, or real-time error feedback to a web form. It also fits complex validation rules and multi-step forms.
Requirements: No scripts are shipped; it is instructions and reference documents only. Working in the target stack (React, Vue, TypeScript, React Hook Form, Formik, Yup or Vee-Validate) is needed to apply the guidance.

Overview

Implement comprehensive form validation including client-side validation, server-side synchronization, and real-time error feedback with TypeScript type safety.

When to Use

User input validation
Form submission handling
Real-time error feedback
Complex validation rules
Multi-step forms

Quick Start

Minimal working example:

typescript

// types/form.tsexport interface LoginFormData {  email: string;  password: string;  rememberMe: boolean;}
export interface RegisterFormData {  email: string;  password: string;  confirmPassword: string;  name: string;  terms: boolean;}
// components/LoginForm.tsximport { useForm, SubmitHandler } from 'react-hook-form';import { LoginFormData } from '../types/form';
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
export const LoginForm: React.FC = () => {  const {    register,    handleSubmit,// ... (see reference guides for full implementation)

// types/form.tsexport interface LoginFormData {  email: string;  password: string;  rememberMe: boolean;}
export interface RegisterFormData {  email: string;  password: string;  confirmPassword: string;  name: string;  terms: boolean;}
// components/LoginForm.tsximport { useForm, SubmitHandler } from 'react-hook-form';import { LoginFormData } from '../types/form';
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
export const LoginForm: React.FC = () => {  const {    register,    handleSubmit,// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
React Hook Form with TypeScript [blocked]	React Hook Form with TypeScript
Formik with Yup Validation [blocked]	Formik with Yup Validation
Vue Vee-Validate [blocked]	Vue Vee-Validate
Custom Validator Hook [blocked]	Custom Validator Hook
Server-Side Validation Integration [blocked]	Server-Side Validation Integration

Best Practices

✅ DO

Follow established patterns and conventions
Write clean, maintainable code
Add appropriate documentation
Test thoroughly before deploying

❌ DON'T

Skip testing or validation
Ignore error handling
Hard-code configuration values

Source and attribution

Source:aj-geddes/useful-ai-promptsinskills/form-validationat commit3f5182c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Form Validation

Form Validation

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

Source and attribution

More from aj-geddes/useful-ai-prompts

Xss Prevention

Wireframe Prototyping

Web Performance Optimization

Vue Application Structure

Visual Regression Testing

User Persona Creation

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices