15 - Contact Form with Email and Message Validation

Description

• Develop a web form that collects user contact information (name, email, message).

• Implement validation for email format and non-empty fields.

• Prevent form submission until all fields are valid.

• Display clear error messages for invalid inputs.

• Optionally, send a confirmation email upon successful submission.

Algorithm

1. Form Structure:

   • Create a form with input fields for name, email, and message.

   • Include a submit button to trigger form submission.

2. Validation Logic:

   • Attach event listeners (e.g., onBlur) to validate fields as users type.

   • Regular expression for email format validation.

   • Check for empty fields.

   • Store validation errors in state variables.

3. Form Submission:

   • Prevent default form submission behavior using event.preventDefault().

   • Check all validation states before proceeding.

   • If valid, send form data via email (optional) or display a success message.

   • Otherwise, display error messages alongside corresponding fields.

Code

import React, { useState } from 'react';

function ContactForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [errors, setErrors] = useState({});

  const handleSubmit = (event) => {
    event.preventDefault();
    const validationErrors = {};

    // Validation logic
    if (!name) validationErrors.name = 'Please enter your name';
    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      validationErrors.email = 'Please enter a valid email address';
    }
    if (!message) validationErrors.message = 'Please enter a message';

    setErrors(validationErrors);

    if (Object.keys(validationErrors).length === 0) {
      // Handle form submission (e.g., send email or display success message)
      console.log('Form submitted successfully!');
      setErrors({}); // Clear errors after successful submission
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          id="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        {errors.name && <p className="error">{errors.name}</p>}
      </div>
      {/* Similar input fields for email and message */}
      <button type="submit" disabled={!isValid()}>Submit</button>
    </form>
  );
}

function isValid() {
  return Object.keys(errors).length === 0;
}

Explanation

1. State Variables:

   • name, email, message: Store user input values.

   • errors: Stores validation errors as an object with field names as keys.

2. HandleSubmit Function:

   • Prevents default form submission.

   • Validates each field using conditional statements.

   • Updates errors state with error messages.

   • If no errors, handles form submission logic (e.g., sends email).

   • Clears errors after successful submission.

3. Validation Logic:

   • Checks for empty fields using if (!field).

   • Uses a regular expression to validate email format.

4. isValid Function:

   • Checks if any validation errors exist, enabling/disabling the submit button.

5. Form Structure:

   • Uses onSubmit to trigger handleSubmit.

   • Renders input fields with error messages below (if any).

   • Disables the submit button if not valid.

Additional Notes

• Replace the console log with actual email sending logic for real-world use.

• Consider using a validation library for more complex rules and error handling.

• Implement security measures like CAPTCHA to prevent spam.