Registration Form React

import React, { useState } from 'react';

function RegistrationForm() {
  // Form data state
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    gender: '',
    dob: '',
    password: ''
  });

  // Error messages state
  const [errors, setErrors] = useState({});

  // Handle input changes
  const handleChange = (e) => {
    const { name, value } = e.target;

    // Update field value in formData
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  // Validate form fields before submit
  const validate = () => {
    const newErrors = {};

    if (!formData.name.trim()) {
      newErrors.name = 'Name is required';
    }

    if (!formData.email.trim()) {
      newErrors.email = 'Email is required';
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = 'Email is invalid';
    }

    if (!formData.phone.trim()) {
      newErrors.phone = 'Phone is required';
    } else if (!/^\d+$/.test(formData.phone)) {
      newErrors.phone = 'Phone must contain only numbers';
    }

    if (!formData.gender) {
      newErrors.gender = 'Please select gender';
    }

    if (!formData.dob) {
      newErrors.dob = 'Date of birth is required';
    }

    if (!formData.password) {
      newErrors.password = 'Password is required';
    } else if (formData.password.length < 6) {
      newErrors.password = 'Password must be at least 6 characters';
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  // Handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();

    if (validate()) {
      alert(`
        Name: ${formData.name}
        Email: ${formData.email}
        Phone: ${formData.phone}
        Gender: ${formData.gender}
        Date of Birth: ${formData.dob}
        Password: ${formData.password}
      `);

      // Optionally reset form here
      // setFormData({ name: '', email: '', phone: '', gender: '', dob: '', password: '' });
      // setErrors({});
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>Registration Form</h2>

      {/* Name field */}
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </label>
      {errors.name && <p style={{ color: 'red' }}>{errors.name}</p>}
      <br />

      {/* Email field */}
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </label>
      {errors.email && <p style={{ color: 'red' }}>{errors.email}</p>}
      <br />

      {/* Phone field */}
      <label>
        Phone:
        <input
          type="tel"
          name="phone"
          value={formData.phone}
          onChange={handleChange}
        />
      </label>
      {errors.phone && <p style={{ color: 'red' }}>{errors.phone}</p>}
      <br />

      {/* Gender field */}
      <label>
        Gender:
        <label>
          <input
            type="radio"
            name="gender"
            value="Male"
            checked={formData.gender === 'Male'}
            onChange={handleChange}
          />
          Male
        </label>
        <label>
          <input
            type="radio"
            name="gender"
            value="Female"
            checked={formData.gender === 'Female'}
            onChange={handleChange}
          />
          Female
        </label>
      </label>
      {errors.gender && <p style={{ color: 'red' }}>{errors.gender}</p>}
      <br />

      {/* Date of Birth field */}
      <label>
        Date of Birth:
        <input
          type="date"
          name="dob"
          value={formData.dob}
          onChange={handleChange}
        />
      </label>
      {errors.dob && <p style={{ color: 'red' }}>{errors.dob}</p>}
      <br />

      {/* Password field */}
      <label>
        Password:
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
      </label>
      {errors.password && <p style={{ color: 'red' }}>{errors.password}</p>}
      <br />

      {/* Submit button */}
      <button type="submit">Register</button>
    </form>
  );
}

export default RegistrationForm;