Required fields in form are not forced

[gikf]

Describe the bug:

I just noticed the fields that are supposed to be required in forms, and be validated in client, do not really force that requirement.

Tested locally and on gitpod.

[atosh502]

Hi @gikf, I'll take a look at it.

[atosh502]

Hi @gikf, I've added the required validations to the form fields using react-hook-form. I noticed a few things missing with the validations and I am adding them here.

1. Can we move our input validations to a library like yup or zod?
2. A few form inputs have default HTML validation because of the input types like number or URL, whereas the ones I've added are shown by chakra's FormErrorMessage components. So maybe we can use an external library to show all kinds of validations and disable the native ones.
   
3. I am using the isInvalid prop of chakra's FormControl to show that the form inputs are invalid. But the behaviour I am seeing is not according to the docs. That is, when isInvalid is set to true the required aria labels aren't added to the input and so the input field doesn't look as if there's something wrong with it, except for the form error message at the bottom.
   
   With the correct aria-labels set: (Expected Result)
   
   cc: PR fix: form validations #2245

[gikf]

Thanks for investigation @atosh502.

I don't have any preference for 1 or 2, I kind of like how the error look after the changes. @ojeytonwilliams what do you think?

3 I've tracked it to the custom components /client/src/components/Form/Input.tsx and /client/src/components/Form/TextArea.tsx. Adding to the wrapped chakra components isInvalid prop similar as FormControl has makes aria-invalid appear.

As a side note, adding isRequired={isRequired} there will bring back the way error was displayed previously, but without the red text.

[atosh502]

As a side note, adding isRequired={isRequired} there will bring back the way error was displayed previously, but without the red text.

Hi @gikf, adding isRequired={isRequired} brings back the default HTML validations for the inputs. I've updated the PR to use the default validation. This should resolve this issue for now.

Regarding custom validation messages and a separate package to manage those validations, I'd be happy to create a new PR to add those changes.

[ojeytonwilliams]

Hey @atosh502 adding a validation library to the client sounds good to me. How about class-validator? Since we already use it on the server, that should make it relatively easy to keep the client and server validation in sync.

[atosh502]

Since we already use it on the server, that should make it relatively easy to keep the client and server validation in sync.

Hi @ojeytonwilliams I'll take a look at the server-side validations and create a PR for it 👍

[ojeytonwilliams]

Awesome, thanks @atosh502. Looking forward to it.