Vue Form Validation with TypeScript

This challenge focuses on implementing robust form validation within a Vue.js application using TypeScript. You will create a reusable validation system to ensure user input meets predefined criteria before submission, enhancing user experience and data integrity.

Problem Description

Your task is to build a Vue component that renders a form and implements client-side validation for its fields. The validation logic should be dynamic and configurable, allowing for different validation rules to be applied to various form fields. The component should clearly indicate invalid fields to the user and prevent form submission until all validation errors are resolved.

Key Requirements:

• Form Structure: Create a form with at least three input fields (e.g., username, email, password).
• Validation Rules: Implement at least the following validation rules:
  • Required: The field cannot be empty.
  • Email Format: The field must contain a valid email address format.
  • Minimum Length: The field must have a minimum number of characters.
  • Password Strength (optional but recommended): The password should meet certain complexity requirements (e.g., uppercase, lowercase, number, special character).
• Dynamic Validation: The validation rules should be declaratively defined for each form field, likely through component props or a configuration object.
• Error Display: Visually indicate invalid fields to the user. This could involve:
  • Adding an error class to the input element.
  • Displaying an error message below or next to the input field.
• Form Submission Control: Disable the form's submit button if there are any validation errors. Enable it only when all fields are valid.
• TypeScript Integration: All components, types, and validation logic should be written in TypeScript.
• Reusability (Optional but Good Practice): Consider how your validation system could be made reusable across different forms.

Expected Behavior:

• As the user types, validation should occur in real-time (or on blur, depending on implementation choice).
• When a field fails validation, an appropriate error message should be displayed.
• The submit button should be disabled as long as any validation error exists.
• Upon successful validation (all fields are valid), the form can be submitted (e.g., an alert message showing the form data).

Edge Cases to Consider:

• Initial form load: What is the state of validation before any user interaction?
• Empty fields: How are required fields handled when the form is initially empty?
• Rapid input: How does the validation perform with very fast typing?
• Browser autofill: Ensure validation still works correctly with autofilled fields.

Examples

Example 1: Valid Input

Input:
User enters "john.doe@example.com" in email, "JohnDoe123" in username, and "P@$$wOrd1" in password.
All fields meet their respective validation criteria (required, valid email, min length for username, basic password strength).

Output:
- No error messages displayed for any field.
- The submit button is enabled.
- Upon clicking submit, an alert or console log displays:
  { username: "JohnDoe123", email: "john.doe@example.com", password: "P@$$wOrd1" }

Example 2: Invalid Email and Short Username

Input:
User enters "invalid-email" in email, "Jo" in username, and "abc" in password.
- "invalid-email" is not a valid email format.
- "Jo" is shorter than the minimum required length of 5 characters for username.
- "abc" is too simple for password strength.

Output:
- Error message "Invalid email format." appears below the email field.
- An error class is applied to the email input.
- Error message "Username must be at least 5 characters long." appears below the username field.
- An error class is applied to the username input.
- Error message "Password is too weak." appears below the password field.
- An error class is applied to the password input.
- The submit button is disabled.

Example 3: Missing Required Field

Input:
User leaves the email field empty, enters "validuser" for username, and "StrongP@ss1" for password.

Output:
- Error message "Email is required." appears below the email field.
- An error class is applied to the email input.
- The submit button is disabled.

Constraints

• The Vue.js version should be 3.x.
• The solution must use TypeScript.
• Form elements should be standard HTML5 input types (<input type="text">, <input type="email">, <input type="password">).
• Avoid using external form validation libraries (like Vuelidate or VeeValidate) for the core validation logic. You can use them for inspiration but implement the validation yourself.
• The validation logic should be integrated within the Vue component or a dedicated composable function.

Notes

• Consider using Vue's Composition API for a more organized and type-safe implementation.
• Think about how to manage the state of validation errors effectively within your component.
• For password strength, a simple regex can be used to check for a mix of character types.
• The exact visual presentation of errors is up to your discretion, but it must be clear and user-friendly.
• Focus on clear separation of concerns: component rendering, state management, and validation logic.