SPFx web part form validation

[joseph_crockett_doe]

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 prop drilling, 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

[#2]

@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.

[#3]

I would use formik https://jaredpalmer.com/formik/


with ui fabric controls: https://github.com/kmees/formik-office-ui-fabric-react

[#4]

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 libraries

https://upmostly.com/tutorials/form-validation-using-custom-react-hooks

[#5]

@Toby Statham I will take a look. I heard about this recently from someone else. Thanks a bunch!