15 - Contact Form with Email and Message Validation

Description

Create a React application that displays a contact form with email and message fields. The form should only submit when the input is valid.

Algorithm

1. Create a form with email and message fields.

2. Add state variables to store the form data and validation errors.

3. Define validation functions for email and message.

4. Use the useState hook to update the state variables when the form data changes.

5. Use the useEffect hook to validate the form data when the form is submitted.

6. Only submit the form if the validation is successful.

Classes

ContactForm: A component that renders the form and handles the submission.

Code

import React, { useState } from 'react';

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

  const validateEmail = (email) => {
    // Email validation logic
  };

  const validateMessage = (message) => {
    // Message validation logic
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const errors = {};
    if (!validateEmail(email)) {
      errors.email = 'Invalid email';
    }
    if (!validateMessage(message)) {
      errors.message = 'Invalid message';
    }
    if (Object.keys(errors).length === 0) {
      // Submit the form
    } else {
      setErrors(errors);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
      />
      <textarea
        value={message}
        onChange={(event) => setMessage(event.target.value)}
      />
      {errors.email && <p>{errors.email}</p>}
      {errors.message && <p>{errors.message}</p>}
      <button type="submit">Submit</button>
    </form>
  );
}

export default ContactForm;

Explanation

The ContactForm component renders a form with email and message fields. The component uses the useState hook to store the form data and validation errors. The validateEmail and validateMessage functions check if the input is valid. The handleSubmit function is called when the form is submitted, and it validates the form data. If the validation is successful, the form is submitted. Otherwise, the error messages are displayed.

Possible Future Enhancements

• Add more validation rules for email and message.

• Display a loading indicator while the form is being submitted.

• Use a library like React Hook Form for form validation.

• Style the form with CSS.