search

podkrepi-bg / frontend

Charity platform https://podkrepi.bg Docs https://docs.podkrepi.bg
https://podkrepi.bg
MIT License
178 stars 90 forks source link

bugfix/1912-Support-Page-Forms-Validation #1961

Open velnachev opened 1 month ago

velnachev commented 1 month ago

Implemented dynamic form validation for each step of the support form

Closes #1912

Motivation and context

On blur validation has been disabled due to an issue caused by the initial focus on the first input field of a form step

Logic is that each step will validated on change only when it was submitted with an error from the validation schema for that step. If a user goes back to a previous step and tries to submit it again with an error that logic will again be triggered

Includes a small fix for the deprecated Hidden MUI component. Fixed as per suggestion in MUI documentation

Testing

Steps to test

  1. Navigate to https://podkrepi.bg/en/support
  2. Try to submit each step without selecting/filling anything
  3. Observe validation behavior for each step
  4. Go back to previous steps and try to submit without selecting/filling anything and observe validation behavior

Affected urls

Environment

New environment variables:

New or updated dependencies:

Dependency name Previous version Updated version Details
dependency/name v1.0.0 v2.0.0
github-actions[bot] commented 1 month ago

✅ Tests will run for this PR. Once they succeed it can be merged.

gparlakov commented 1 month ago

@velnachev hi. This "ValidationObserver" pattern does not seem to have been used before in the project. Help me understand where it comes from and what makes it the right fit for the project that uses formik

velnachev commented 1 month ago

@velnachev hi. This "ValidationObserver" pattern does not seem to have been used before in the project. Help me understand where it comes from and what makes it the right fit for the project that uses formik

Hi! The pattern has not been used in the project since I've developed it to solve the particular issue and improve the UX of the form flow by displaying error states and triggering the onChange validation of the form only once an erroneous submission attempt has been made for the particular step, instead of it being immediately triggered once a field is touched.

Formik is certainly being used, and the role of the ValidationObserver component is to simply gain access to the formik context, so the logic of tracking submission attempts for each separate step in a state variable can be achieved, which is then used in toggling the onChange validation of formik on and off.

If this is not a desired behavior - we can just do validateOnBlur={false} on the form and the described issue would be solved.

Edit: Actually going back to the ticket now, and we are happy with the described behavior, I think there is an easier way of achieving it, so please let me know so I can look into reworking it when I get a chance

velnachev commented 1 month ago

Thank you for the review! I'll include those when I get a chance and if I cannot fix it in the simpler alternative way I think could be possible.