🐛 Bug: "Next" button remains enabled after deleting answers

[eunicode]

Overview

On these pages: /form/why and form/goals, when a user fills out required answers and then deletes them, the "Next" button remains enabled, allowing progression to the next step even though required fields are empty.

---

⚙️ Steps to Reproduce

1. Fill out the required answers on the form.
2. Observe that the "Next" button becomes enabled (purple).
3. Delete the answers so that all required fields are blank again.
4. Notice that the "Next" button stays enabled and allows moving to the next step.

---

Expected Behavior

The "Next" button should be disabled (lavender) when any required fields are empty.

---

🖼️ Screenshot

When the "Next" button is disabled, it appears lavender.
When enabled, it appears purple.
In the screenshot, the questions are blank, but the button is still purple, allowing progression.

---

✅ Action Items

• "Next" button becomes disabled immediately after all required fields are cleared.
• UI color updates correctly (lavender = disabled, purple = enabled).
• User cannot advance to the next step without completing required fields.

---

Notes

Perhaps this issue could be part of a larger Validation Epic.
Issue #1822 also falls under this category.

Currently, field validation only checks whether the input length is greater than one character.
Validation could be improved by:

• Using more robust validation rules.
• Displaying appropriate error states and error messages when fields are invalid or empty.
• Aligning validation behavior and UI feedback with other forms in the project.

For reference, the Contact Form implements validation using React Hook Form and Zod for schema validation and form state management. Those deps can be reused to handle the Letter Form and the Contact Form can serve as an example.

[sydneywalcoff]

@eunicode you always write such beautiful issues!! 😍