Modern Form Validation Techniques

import { useState } from 'react'
 
function ValidationForm() {
  const [formData, setFormData] = useState({
    email: '',
    password: '',
    confirmPassword: '',
    username: ''
  })
  const [errors, setErrors] = useState({})
  const [touched, setTouched] = useState({})
 
  const validateEmail = (email) => {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    return re.test(email)
  }
 
  const validateField = (name, value) => {
    switch(name) {
      case 'email':
        return validateEmail(value) ? '' : 'Please enter a valid email'
      case 'password':
        return value.length >= 8 ? '' : 'Password must be at least 8 characters'
      case 'confirmPassword':
        return value === formData.password ? '' : 'Passwords do not match'
      case 'username':
        return value.length >= 3 ? '' : 'Username must be at least 3 characters'
      default:
        return ''
    }
  }
 
  const handleChange = (e) => {
    const { name, value } = e.target
    setFormData(prev => ({ ...prev, [name]: value }))
    
    if (touched[name]) {
      setErrors(prev => ({ 
        ...prev, 
        [name]: validateField(name, value) 
      }))
    }
  }
 
  const handleBlur = (e) => {
    const { name, value } = e.target
    setTouched(prev => ({ ...prev, [name]: true }))
    setErrors(prev => ({ 
      ...prev, 
      [name]: validateField(name, value) 
    }))
  }
 
  const handleSubmit = (e) => {
    e.preventDefault()
    const newErrors = {}
    
    Object.keys(formData).forEach(key => {
      const error = validateField(key, formData[key])
      if (error) newErrors[key] = error
    })
 
    if (Object.keys(newErrors).length === 0) {
      console.log('Form submitted successfully!', formData)
    } else {
      setErrors(newErrors)
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Username</label>
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleChange}
          onBlur={handleBlur}
        />
        {errors.username && touched.username && (
          <span className="error">{errors.username}</span>
        )}
      </div>
      
      <div>
        <label>Email</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
          onBlur={handleBlur}
        />
        {errors.email && touched.email && (
          <span className="error">{errors.email}</span>
        )}
      </div>
      
      <button type="submit">Submit</button>
    </form>
  )
}

function validateEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return regex.test(email)
}

function validatePassword(password) {
  const hasLength = password.length >= 8
  const hasUpperCase = /[A-Z]/.test(password)
  const hasLowerCase = /[a-z]/.test(password)
  const hasNumber = /\d/.test(password)
  const hasSpecialChar = /[!@#$%^&*]/.test(password)
  
  return {
    isValid: hasLength && hasUpperCase && hasLowerCase && hasNumber,
    strength: [hasLength, hasUpperCase, hasLowerCase, hasNumber, hasSpecialChar]
      .filter(Boolean).length
  }
}

import { useForm } from 'react-hook-form'
 
function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm()
  
  const onSubmit = (data) => {
    console.log(data)
  }
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register('email', {
          required: 'Email is required',
          pattern: {
            value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
            message: 'Invalid email address'
          }
        })}
      />
      {errors.email && <span>{errors.email.message}</span>}
      <button type="submit">Submit</button>
    </form>
  )
}

import { Formik, Form, Field } from 'formik'
import * as Yup from 'yup'
 
const validationSchema = Yup.object({
  email: Yup.string()
    .email('Invalid email')
    .required('Required'),
  password: Yup.string()
    .min(8, 'Must be at least 8 characters')
    .required('Required')
})
 
function MyForm() {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      validationSchema={validationSchema}
      onSubmit={(values) => console.log(values)}
    >
      {({ errors, touched }) => (
        <Form>
          <Field name="email" type="email" />
          {errors.email && touched.email && <div>{errors.email}</div>}
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  )
}