# 33 - Form Validation with Error Messages

### **Description**

Create a form validation component that handles various form input types, defines validation rules for each field, displays error messages near invalid fields, and prevents form submission until all fields are valid.

### **Algorithm**

1. Create a React component for the form validation
2. Define the form fields and their validation rules
3. Use the useState hook to manage the form data and error messages
4. Use the useEffect hook to validate the form data when the user submits the form
5. Display error messages near invalid fields
6. Prevent form submission until all fields are valid

### Classes

* `FormValidation`: The main form validation component
* `FormField`: A single form field component
* `ErrorMessage`: An error message component

### Code

FormValidation.js

```javascript
import React, { useState, useEffect } from 'react';
import FormField from './FormField';
import ErrorMessage from './ErrorMessage';

const FormValidation = () => {
  const [formData, setFormData] = useState({});
  const [errorMessages, setErrorMessages] = useState({});

  const validateForm = () => {
    const errors = {};
    // Validate form data here
    return errors;
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const errors = validateForm();
    if (Object.keys(errors).length === 0) {
      // Form is valid, submit it
    } else {
      setErrorMessages(errors);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <FormField name="name" label="Name" />
      <FormField name="email" label="Email" />
      <FormField name="password" label="Password" />
      {Object.keys(errorMessages).map((fieldName) => (
        <ErrorMessage key={fieldName} fieldName={fieldName} message={errorMessages[fieldName]} />
      ))}
    </form>
  );
};

export default FormValidation;
```

FormField.js

```javascript
import React from 'react';

const FormField = ({ name, label }) => {
  return (
    <div>
      <label>{label}</label>
      <input type="text" name={name} />
    </div>
  );
};

export default FormField;
```

ErrorMessage.js

```javascript
import React from 'react';

const ErrorMessage = ({ fieldName, message }) => {
  return (
    <div>
      <span>{fieldName}</span>: {message}
    </div>
  );
};

export default ErrorMessage;
```

### Explanation

The code creates a form validation component that handles various form input types, defines validation rules for each field, displays error messages near invalid fields, and prevents form submission until all fields are valid. The component uses the useState hook to manage the form data and error messages, and the useEffect hook to validate the form data when the user submits the form.

### Possible Future Enhancements

* Add support for more advanced validation rules, such as password strength and email format
* Add support for conditional validation rules, such as requiring a field only if another field is filled
* Add support for internationalization and localization of error messages
* Use a library like React Hook Form for more advanced form validation features


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://choubey.gitbook.io/react-coding-puzzles/33-form-validation-with-error-messages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.