back
loading skill details...
>
Form Validation
Table of Contents
Overview
When to Use
Quick Start
Reference Guides
Best Practices
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:
// types/form.ts
export interface LoginFormData {
email: string;
password: string;
rememberMe: boolean;
}
export interface RegisterFormData {
email: string;
password: string;
confirmPassword: string;
name: string;
terms: boolean;
}
// components/LoginForm.tsx
import { 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
React Hook Form with TypeScript
Formik with Yup Validation
Formik with Yup Validation
Vue Vee-Validate
Vue Vee-Validate
Custom Validator Hook
Custom Validator Hook
Server-Side Validation Integration
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
1d:[don't have the plugin yet? install it then click "run inline in claude" again.