React Form Validation

[bjankord]

Issue Description

Terra-Legacy uses [jQuery-validation| https://jqueryvalidation.org/] for form validation. We are migrating to React and are no longer using jQuery. We want to investigate alternative libraries for form validation. There have been suggestions on not including form validation as a part of terra and instead leave that up to the application. This issue is for discussion and to document the approach we will take.

Issue Type

• [ ] New Feature
• [ ] Enhancement
• [ ] Bug
• [x] Other

Expected Behavior

Spike on form validation solutions for use with terra-form.

Current Behavior

Terra does not provide any form validation.

[bjankord]

This project was one that has been suggested to check out: https://github.com/skaterdav85/validatorjs

[JakeLaCombe]

How about for uncontrolled inputs? I take it we don't need to worry about that.

I really like how that validator takes in a hash of data as opposed to being attached to dom nodes. I feel that makes overriding the onSubmit function much easier than if we tried to attach validation to individual dom elements.

[JakeLaCombe]

Here is another approach that we could leverage. https://github.com/Lesha-spr/react-validation

While this approach has components that are already defined for inputs and other form components, we are able to extend our own components to leverage this validation api. One thing I like about this api is that we can write our own field components to have a hint area that is automatically populated when a validation error occurs.

[JakeLaCombe]

React Bootstrap Validation contains validation methods that are similar to how Rails handles their validations. https://www.npmjs.com/package/react-bootstrap-validation

I'll write up something for the next war room meeting on how we envision consumers interfacing with any validations we provide.

[bjankord]

Today's war room discussion notes on form validations:

• KAs recommend validations should not be done at the component level, it should be done at store/redux level
• Revisit prior validation spike to see what options there are listed on that
• KAs commented that it is going to be hard for terra to recommend a form validation solution that fits all apps. App teams will be better suited to determine validation strategies.
• We can recommend a solution once there is a consensus around a validation implementation.
• KAs recommended that we should find a recommendation otherwise there will be inconsistency with validation implementations. Everyone will do their own thing.

@JakeLaCombe feel free to expand on this if I missed something.

[JakeLaCombe]

The main thing I'm curious on is why the validation should be done at the store/redux level. The store/redux is usually for information that is maintained on an entire application, and I feel that attaching forms to it could cause a state to be potentially larger than it needs to be, exposing unnecessary information on a global level. I found this article to be a good explanation of a react vs a redux form. https://goshakkk.name/should-i-put-form-state-into-redux/

I looked at the original Forms direction spike, and I did see the comment about having custom validations at the App level as opposed to a form level. I think is making too much assumption of how individual forms will be validated, and I'm curious how it will handle when various forms need to do their own custom regex checking for individual components. Personally, I favor the approach found in https://github.com/Lesha-spr/react-validation, where there exist a form component that reads in the individual validations attached to the inputs, and sees if the inputs of the form pass the rules of the validations.

As for the other aspect of the original spike, there was also the request for a utility library that could live outside of the forms. My recommendation for that would be https://github.com/skaterdav85/validatorjs. To use that, consumers would just need to override the onSubmit function for forms, and use that library to see if the hash of data is valid.

[bjankord]

In regards to a utility library that could live outside forms, this post has some nice ideas along with that concept: https://spin.atomicobject.com/2016/10/05/form-validation-react/

Here is the related repo showing it in practice: https://github.com/atomicobject/elegant-form-validation-react/blob/master/src/CreateAccount.js

[bjankord]

Duplicate to https://github.com/cerner/terra-framework/issues/9