search

uprm-inso4101-2023-2024-s2 / semester-project-rumaradoptionapp

semester-project-rumaradoptionapp created by GitHub Classroom
5 stars 0 forks source link

Confirm Password Field Enhancement #246

Closed frances-sepulveda closed 7 months ago

frances-sepulveda commented 7 months ago

Objective: The objective of this enhancement is to add a "Confirm Password" field to the signup form, enabling users to verify their password by entering it a second time. Validation is implemented to compare the password and confirm password fields, and an error message is displayed if they do not match, ensuring data accuracy and minimizing input errors.

Task Description: This task involves adding a new input field labeled "Confirm Password" to the signup form and implementing validation logic to compare the password and confirm password fields. If the values entered in these fields do not match, an error message is displayed to prompt users to correct their input. Real-time validation ensures immediate feedback to users as they type, enhancing the user experience.

Implementation:

  1. Add Confirm Password Field: Insert a new input field labeled "Confirm Password" below the original password field in the signup form HTML.

  2. Validation Logic: Implement JavaScript code to compare the values entered in the password and confirm password fields. This logic should trigger when the user submits the form or when they finish typing in the confirm password field.

  3. Error Message Display: Create a placeholder or div element below the confirm password field to display an error message if the passwords do not match. Style this message to be visually distinct and accessible.

  4. Real-Time Validation: Implement real-time validation using event listeners to check for input changes in the confirm password field. Display the error message dynamically as soon as a mismatch is detected.

  5. Accessibility: Ensure that the error message is accessible to all users, including those using screen readers, by using semantic HTML elements and providing appropriate aria attributes.

Testing and Debugging:

  1. Test the functionality of the confirm password field by entering matching and mismatching passwords and verifying that the validation works as expected.

  2. Test the real-time validation by typing in the confirm password field and observing the immediate feedback provided when the passwords do not match.

rukitoyordan commented 7 months ago

Approved for implementation. Thank you for describing it accordingly

frances-sepulveda commented 7 months ago

This task was done successfully!