[OTHER] Forms validations approach

[amandamartin-dev]

What would you like to share?

I have noticed some piecemeal issues coming in related to various parts of forms needing client side validation and user feedback. Opening this discussion to make sure we are choosing a universal approach for how to handle all forms with the following in mind:

accessibility user experience spam control etc..

Please add any approaches/considerations to this issue for review. I also believe we should review any issues related to this and make sure all devs are working in the same way to create a more maintainable situation in the future.

Additional information

No response

[psavan1655]

react-hook-form is a good option. considering both functionality and ease of use. https://www.react-hook-form.com/

if we want to go more complex then we can go with formik as well. Both have a great community so it's easy to get bugs resolved.

[eddiejaoude]

I think Formik was mentioned in Discord also

[amandamartin-dev]

I guess whether or not to use a library is a bigger question since forms has already been deployed, swapping out to a library could be more work up front but perhaps easier in the future. So as I see it we have 2 options:

1. assess the form libraries for React for our forms and validations needs
2. Continue with the forms we have, but set up parameters for validations that can be applied to all current and future fields. Such as: all form fields must have descriptive labels that also reflect any parameters or forms should give live feeback to the user while filling out fields so the user knows about any errors before submit, etc etc

wdyt?

[ChinmayMhatre]

I guess whether or not to use a library is a bigger question since forms has already been deployed, swapping out to a library could be more work up front but perhaps easier in the future. So as I see it we have 2 options:

1. assess the form libraries for React for our forms and validations needs
2. Continue with the forms we have, but set up parameters for validations that can be applied to all current and future fields. Such as: all form fields must have descriptive labels that also reflect any parameters or forms should give live feeback to the user while filling out fields so the user knows about any errors before submit, etc etc

wdyt?

I agree, We need to check the libraries for our use cases. both the libraries mentioned are good options.

I feel since forms are a core features we could benefit from a library in the long term. We could work on some small POCs for both. I am currently working on formik at work on a react project could explore on it for LinkFree.

Then we could decided whether to add the library or add validations on our own.

[amandamartin-dev]

@ChinmayMhatre that's awesome! I've never used either library so I may not be the best to assess, but happy to help however makes the most sense. I wonder if anyone in the community already has experience with react hook forms and would be best ot help with the feature comparison

[psavan1655]

yes, I have experience with both Formik and React Hook forms. And also have experience avoiding libraries and implementing custom handler functions. Because when we have multi-step forms in different components, libraries are hard to deal with.

[badrivlog]

I think React Hook Form might be a good choice, If we prefer a more imperative approach and prioritize performance with a smaller bundle size.

[amandamartin-dev]

@badrivlog and @ChinmayMhatre since you both seem to understand the two form choices, perhaps we agree upon a list of requirements to compare the two against?

Some things I can think of: does the library appear to be supported well now and likely in the future? how is performance affected bundle size accessibility features general feature comparison flexibility to extend if needed dev experience ease of migrating current form solution

what else?

[badrivlog]

@badrivlog and @ChinmayMhatre since you both seem to understand the two form choices, perhaps we agree upon a list of requirements to compare the two against?

Some things I can think of: does the library appear to be supported well now and likely in the future? how is performance affected bundle size accessibility features general feature comparison flexibility to extend if needed dev experience ease of migrating current form solution

what else?

React Hook Form will help write less code while achieving better performance. https://www.react-hook-form.com/

Does the library appear to be supported well now and likely in the future? The React Hook Form library has gained significant popularity and has a thriving ecosystem, which includes strong community support. The library has comprehensive and well maintained documentation. The github repo has (35.8k) stars and it's powered by Vercel.

How is performance affected bundle size: React Hook Form is a tiny library without any dependencies. The library is designed to be lightweight and optimized for performance. It has a small footprint and focuses on providing essential form handling features.

Accessibility features: Yes, React Hook Form has support standard HTML5

Flexibility to extend if needed: React Hook Form provides a flexible API that allows for easy extension and customization when needed. And the great thing about React Hook Form is that it allows to plug it into basically any framework or UI library.

Ease of migrating current form solution: React Hook Form provides a straightforward and easy-to-understand API. It offers functions like useForm, register, handleSubmit, and errors to handle form state, input registration, form submission, and validation errors. The API is designed to be intuitive, making it easy to learn and use.

Overall, React Hook Form offers a pleasant and developer-friendly experience by providing a simple and intuitive API and focusing on improving the development workflow.

[catalinpit]

I'd propose React Hook Form (RHF) as well. I refactored an application to use RHF, and it simplified the code a lot. It's a really great library, and it also works well with Zod (we already use Zod for data validation).

[alokVerma749]

@ChinmayMhatre that's awesome! I've never used either library so I may not be the best to assess, but happy to help however makes the most sense. I wonder if anyone in the community already has experience with react hook forms and would be best ot help with the feature comparison

react-hook-form is a good choice, as we are also using it in our company's project, btw we are using next 13.4

[ChinmayMhatre]

@eddiejaoude is this still relevant? I can work the poc for this. I believe react hook form is the suggestion by everyone, We can check the usefulness by testing it on one of the forms?

[eddiejaoude]

Sounds like a good plan 👍

ℹ️ eddiejaoude has some opened assigned issues: 🔧View assigned issues

[ChinmayMhatre]

Awesome! I'll assign it to me. Will raise a draft PR once I have something.

ℹ️ ChinmayMhatre has some opened assigned issues: 🔧View assigned issues

[psavan1655]

@ChinmayMhatre @eddiejaoude I suggest you use Zod schema validation with React-hook-form, It will be flawless and future alteration in validation will become too easy.

[github-actions[bot]]

The issue has been unlocked and is now ready for dev. If you would like to work on this issue, you can comment to have it assigned to you. You can learn more in our contributing guide https://github.com/EddieHubCommunity/BioDrop/blob/main/CONTRIBUTING.md

[SaraJaoude]

ChinmayMhatre eddiejaoude I suggest you use Zod schema validation with React-hook-form, It will be flawless and future alteration in validation will become too easy.

Thank you @psavan1655 - Zod is already in the project should Chinmay wish to use it for this example.