Forum Discussion
SPFx web part form validation
We've built several web parts using SPFx, React, and the Office UI Fabric React controls to replace existing InfoPath forms.
What are people using for form validation? Is there a popular JavaScript library for React forms that works well within the constraints of SPFx?
We found InfoPath rules to be very powerful and fast to implement; writing it out in JavaScript logic has proven rather difficult. We're writing validation onBlur or onChange from most of the Office UI controls --- but managing overall form validation through https://medium.com/@MCapoz/passing-data-in-react-with-prop-drilling-904aeb3cb5e, which creates really messy React architecture as Office UI controls deep in components still need to report back their validity.
I'm wondering what others have found that worked?
Thank you for contributing
4 Replies
If you're using the latest version of React (16.8 >) then I'd have a look at React Hooks - https://reactjs.org/docs/hooks-intro.html
Here's a good example of using hooks for form validation, without the need for any other librarieshttps://upmostly.com/tutorials/form-validation-using-custom-react-hooks
Toby Statham I will take a look. I heard about this recently from someone else. Thanks a bunch!
- I would use formik https://jaredpalmer.com/formik/
with ui fabric controls: https://github.com/kmees/formik-office-ui-fabric-react joseph_crockett_doe I am also building SPFx web parts to replace legacy forms and doing manual validation on each component. I'd love to know an easier way. I am also struggling with the inconsistency in the properties available for validation in the different components. For example, the validateOnFocusOut and validateOnLoad properties exist for the TextField component but not the Dropdown component. I'm hoping for some consistency.
