React Form with Validation in TypeScript

This challenge asks you to build a simple form in React using TypeScript, incorporating robust validation to ensure data integrity. Creating forms with validation is a fundamental skill in web development, crucial for user experience and preventing errors on the backend. This exercise will test your understanding of React components, state management, event handling, and TypeScript's type safety.

Problem Description

You need to implement a form with the following fields:

• Name: A text input field, required. The name should contain at least two words (e.g., "John Doe").
• Email: An email input field, required. The email must be a valid email format.
• Password: A password input field, required. The password must be at least 8 characters long.
• Confirm Password: A password input field, required. The value must match the Password field.

The form should:

• Display appropriate error messages next to each field when validation fails.
• Disable the submit button until all fields are valid.
• Clear validation errors when a field is focused.
• Upon successful submission (all fields valid), display a success message. The form should not actually submit data to a server; simply display the success message.
• Maintain the state of the form fields as the user types.

Expected Behavior:

1. Initially, the submit button should be disabled.
2. As the user types in the fields, validation should occur in real-time.
3. If a field is invalid, an error message should be displayed next to it.
4. If a field becomes valid, the error message should disappear.
5. When all fields are valid, the submit button should be enabled.
6. Clicking the submit button should display a "Success!" message.

Edge Cases to Consider:

• Empty input fields.
• Invalid email formats (e.g., missing "@" symbol, invalid domain).
• Passwords that don't match.
• Names with only one word.
• Handling focus events to clear errors.

Examples

Example 1:

Input: Name: "John", Email: "invalid-email", Password: "short", Confirm Password: "short"
Output: Submit button disabled. Error messages displayed for Name, Email, and Password.
Explanation: Name is too short, Email is invalid, and Password is too short.

Example 2:

Input: Name: "John Doe", Email: "john.doe@example.com", Password: "password123", Confirm Password: "password123"
Output: Submit button enabled. No error messages displayed.
Explanation: All fields are valid.

Example 3:

Input: Name: "John Doe", Email: "john.doe@example.com", Password: "password123", Confirm Password: "differentpassword"
Output: Submit button disabled. Error message displayed for Confirm Password.
Explanation: Passwords do not match.

Constraints

• The form must be implemented using functional components and React Hooks (useState).
• The code must be written in TypeScript.
• You are free to use any styling library or CSS-in-JS solution you prefer (or plain CSS).
• The form does not need to be styled extensively; focus on functionality and validation.
• The solution should be reasonably performant; avoid unnecessary re-renders.
• The solution should be well-structured and readable.

Notes

• Consider using regular expressions for email and password validation.
• Think about how to manage the form state efficiently.
• Focus on providing clear and informative error messages to the user.
• You can use a third-party validation library if you wish, but it's not required. The goal is to demonstrate your understanding of validation logic.
• The "Success!" message can be a simple <div> element. No backend integration is required.