✅ Input Validation in React

Validating form input is essential for ensuring users submit correct and complete data. React makes this easy by combining state and conditional logic.

📦 1. Basic Required Field

import { useState } from 'react';

function SignupForm() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!email) {
      setError('Email is required');
    } else {
      setError('');
      console.log('Submitted:', email);
    }
  };

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

🔍 2. Real-Time Validation

Validate input as the user types for better user experience:

function handleChange(e) {
  const value = e.target.value;
  setEmail(value);

  if (!value.includes('@')) {
    setError('Email must include @');
  } else {
    setError('');
  }
}
  

🧪 3. Custom Validation Logic

• Use regex or string methods
• Combine multiple conditions (length, pattern, etc.)
• Display user-friendly messages

🎯 4. Prevent Submit If Invalid

Always prevent form submission if input fails validation:

if (!email || error) {
  return; // stop submission
}
  

Validation ensures your app receives clean and expected data. React's controlled input system makes it simple to enforce real-time rules.