> For the complete documentation index, see [llms.txt](https://choubey.gitbook.io/react-coding-puzzles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://choubey.gitbook.io/react-coding-puzzles/15-contact-form-with-email-and-message-validation.md).

# 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**

```javascript
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.