Dev: Field Requirement Indicators on Registration Page

[Maarimar]

Overview

The Registration Page needs to communicate input requirements clearly. Currently, if a field fails validation, the user only sees a general error message after attempting to submit.

Details

We need to provide:

1. A visible, real time list of requirements when a field is focused.
2. “Success” or “Error” indicator icon to the right of the field once the user moves focus away.
3. “Success” or “Error” indicator icon to the left of the requirement once the user moves focus away.

The purpose is to show which specific requirements are met or unmet as the user types.

Action Items

• [x] Assign yourself to the development issue.
• [x] Move the development issue from the Prioritized Backlog to In Progress.
• [ ] Implement the changes specified in the Design Issue and Figma wireframes, including the elaborate password validation requirements.
• [ ] Create a PR, if applicable.
• [ ] Create a new slide (or edit one if it already exists) in staging and add the before and after images
• [ ] Once the PR has been approved, use it to close this issue. If there is no PR is associated with this issue, close this issue after lead signoff.

Resources/Instructions

• Design details: https://github.com/hackforla/tdm-calculator/issues/2081#issuecomment-3464299790
• Design mockups: https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=4041-12659&p=f&t=EHtZCIyRpD0AXs9w-0

Staging and Release decks

• Staging Deck
  • [Staging slide, ISSUE NUMBER]
• Release Deck
  • [2025-MM-DD Release deck, slide ISSUE NUMBER]