-
Notifications
You must be signed in to change notification settings - Fork 0
Validations Proposal
Below you'll find the React Community of Practice's first official suggestion to the account. We researched 4 different options for form validations and evaluated them against a set of criteria we established that can be found below. While we have 1 top suggestion, the other options should still be looked at depending on your situation.
- Criteria reuse
- Flexible/customizable
- Conditional validations
- Composable
- 508 Compliant
- Instant feedback
- Easy to style
- Integration w/ state management
- File upload
- Documentation
- User base
Based on our criteria, Formik resulted in our top choice. If you're starting a new form, we decided this was the best choice from the options we researched. Formik stood out because its integration with Yup allowed us to handle various and complicated validations while easily displaying validation errors. It also already had built-in functionality to handle form logic such as onChange, onBlur, touched, dirty, and more. Also, you can add Formik to your application incrementally making it easier to integrate with. On top of all of this, it has a large user base with strong documentation making it easy to find various implementation questions. Something to keep in mind when using Formik is that it's not a validation library. It involves writing forms slightly different using the package's components. Formik Notes
Calidation also scored highly against our criteria. The main reasons it scored lower than Formik were a weaker user base, instant feedback logic had to be written separately, and there was no default error display. Otherwise, it covered our validation needs and would serve as a great 2nd option if your team didn't like how Formik does its form implementation with its own components Calidation Notes
Redux also did well against most of our criteria except file upload validations. If you're already using redux to store your form data then this could be a good option for you. Based on our research most form state doesn't need to go into redux, so this shouldn't be the first option you go to. Only if you decide redux is really needed or you are already too dependent on redux should you go with ReduxForms. https://redux.js.org/faq/organizing-state#should-i-put-form-state-or-other-ui-state-in-my-store
You have to hand roll everything with the option. This might be great for a quick and simple prototype, but otherwise, you're rewriting logic that lots of other libraries have already done for you
- Criteria reuse – 10
- reusable methods and event handlers
- use Yup validation schemas or customized validation functions anywhere
- Flexible/customizable - 10
- You can do it all
- Conditional validations - 10
- Yup.when provides validation on conditionally displayed fields
- Composable
- An entire Formik form acts as a normal React component
- 508 Compliant
- this would be done outside of formik. Formik doesn’t help with 508 compliance or take away from it
- Instant feedback
- onChange -> handleChange, onBlur -> handleBlur
- these methods can hook into formik to run on each of the lifecycle methods
- Easy to style
- Normal components, just as easy as normal React components
- Integration w/ state management
- According to our prophet Dan Abramov, form state is inherently ephemeral and local, so tracking it in Redux (or any kind of Flux library) is unnecessary
- File upload
- Documentation
- https://jaredpalmer.com/formik/
- https://github.com/jquense/yup
- https://github.com/jaredpalmer/formik/issues/41
- https://keyholesoftware.com/2017/10/23/the-joy-of-forms-with-react-and-formik/
- https://jaredpalmer.com/formik/users
- https://github.com/jaredpalmer/formik
- https://hackernoon.com/painless-react-forms-with-formik-e61b70473c60
- https://mead.io/formik/?utm_source=github&utm_campaign=formikrepo
Must haves
- Criteria reuse ✅ Pass in a config object -- matches on
- Flexible/customizable ✅ Basic validations provided, but majority of use is custom validations
- Conditional validations ✅ element has all fields available, add validateIf to the field config
- Composable ✅ just add as many as you want to the config
- 508 Compliant ✅ errors are returned as strings
Nice to haves
- Instant feedback 😐 probably have to use onChange but like...I assume it would work
- Easy to style ✅ All styling up to developer
- Integration w/ state management 😐 not built in, but easy to implement
- File upload 😐 nothing in the docs
- Documentation ✅
- User base 😐 215 stars
https://redux-form.com/7.0.3/docs/gettingstarted.md/
Must haves Criteria reuse - 9
- Single validations applied to multiple fields
- Reuse field level validations across different forms Flexible/customizable - 8 - Conditional validations - 10 the parameters to the validation function are: value - The current value of the field allValues - The values of the entire form props - Any props passed to the form Composable - 10
- Component Prop example:
- validate={[required, maxLength15, minLength2]} 508 Compliant - N/A
- Renders whatever JSX you provide to the Validation Field component Nice to haves Instant feedback - yes Easy to style - 8 Integration w/ state management - 10 (it’s redux) File upload - 4
- https://github.com/erikras/redux-form/issues/71
- “It's important to note that
<input type="file" />Doesn't support the setting of values, so if you want to bind the values back to something you'll need to write a custom "selected files" component.” - “You need to do some parsing of the event before calling
fields.yourField.handleChange(). Something like this:” Documentation - 8 User base - 8
Miscellaneous: Warnings are errors that do not mark a form as invalid, allowing for two tiers of severity for errors.