React Form Validation

Learn to validate forms and show errors.

Basic Validation

```javascript function LoginForm() { const [email, setEmail] = useState(''); const [errors, setErrors] = useState({});

const validate = () => { const newErrors = {}; if (!email) { newErrors.email = 'Email required'; } else if (!/\S+@\S+\.\S+/.test(email)) { newErrors.email = 'Email invalid'; }

return newErrors; };

const handleSubmit = (e) => { e.preventDefault(); const newErrors = validate(); if (Object.keys(newErrors).length === 0) { // Submit form } else { setErrors(newErrors); } };

return ( <form onSubmit={handleSubmit}> <input value={email} onChange={e => setEmail(e.target.value)} /> {errors.email && <p style={{color: 'red'}}>{errors.email}</p>} <button type="submit">Submit</button> </form> ); } ```

Real-time Validation

```javascript const [email, setEmail] = useState(''); const [emailError, setEmailError] = useState('');

const handleEmailChange = (e) => { const value = e.target.value; setEmail(value);

if (!value) { setEmailError('Email required'); } else if (!/\S+@\S+\.\S+/.test(value)) { setEmailError('Email invalid'); } else { setEmailError(''); } }; ```

Remember

- Validate on submit - Show clear error messages - Disable submit if errors - Use regex for patterns

> Next: Learn lazy loading!