> 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/33-form-validation-with-error-messages.md).

# 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