This PR enhances the signup component by adding ZOD validation to improve form validation and user feedback.
Changes Made:
ZOD Validation Integration:
Added ZOD to the project for schema-based form validation.
Created a validation schema for the signup form, including fields for email, username, password, and confirm password.
Validation Schema Details:
Email:
Must be a valid email format.
Minimum length of 6 characters.
Maximum length of 255 characters.
Username:
Must contain at least one lowercase letter, one uppercase letter, and one special character.
Minimum length of 5 characters.
Maximum length of 10 characters.
Password:
Must contain at least one lowercase letter, one uppercase letter, one number, and one special character.
Minimum length of 8 characters.
Confirm Password:
Must match the password field.
Form Validation Enhancements:
Integrated zodResolver from @hookform/resolvers/zod to use the ZOD schema for form validation.
Improved error handling to display appropriate error messages next to the respective form fields.
UI Updates:
Updated the signup form to display validation errors directly under the corresponding input fields.
Adjusted the layout to ensure that the password toggle button stays inside the input field even when validation errors are displayed.
How to Test:
Navigate to the signup page:
Open the signup form in your browser.
Test with invalid data:
Enter invalid email formats (e.g., user@domain) to check email validation.
Enter usernames that do not meet the criteria (e.g., missing special characters, less than 5 characters, more than 10 characters) to test username validation.
Enter passwords that do not meet the complexity requirements (e.g., missing uppercase letters, digits, special characters, or less than 8 characters) to test password validation.
Enter different values for the password and confirm password fields to test confirm password validation.
Check error messages:
Ensure that appropriate error messages are displayed for each validation rule.
Verify that the password toggle button stays inside the input field even when errors are displayed.
Test with valid data:
Enter valid data for all fields and submit the form.
Ensure that the form submits successfully without errors and redirects to the login page upon successful registration.
Resolves: [Issue Number] #23
Checklist
I have tested my changes locally to ensure they work as expected.
I have documented my changes and provided instructions for testing.
The UI properly displays validation errors and maintains layout integrity.
Screenshots
Error screenshot :
Invalid email screenshot:
Invalid username screenshot :
Password error screenshot :
Valid Input :
Additional Notes/Comments
Any additional remarks or suggestion
s concerning this pull request are welcome.
I certify that I have carried out the relevant checks and provided the requisite screenshot for validation by submitting this pull request.
I appreciate your contribution.
Description
This PR enhances the signup component by adding ZOD validation to improve form validation and user feedback.
Changes Made:
ZOD Validation Integration:
Validation Schema Details:
Email:
Password: Must contain at least one lowercase letter, one uppercase letter, one number, and one special character. Minimum length of 8 characters.
Confirm Password: Must match the password field.
Form Validation Enhancements:
UI Updates:
How to Test:
Check error messages:
Resolves: [Issue Number] #23
Checklist
Screenshots
Error screenshot :
Invalid email screenshot:
Invalid username screenshot :
Password error screenshot :
Valid Input :
Additional Notes/Comments
I certify that I have carried out the relevant checks and provided the requisite screenshot for validation by submitting this pull request. I appreciate your contribution.