A simple and declarative way to validate your forms in React.
Create your stateSchema
Your stateSchema is an object key value-pair contains the value of an input and the current error if any.
const stateSchema = { first_name: { value: '', error: '', }, last_name: { value: '', error: '', }, tags: { value: '', error: '', }, }; Create validation in your stateSchema
Property should be the same in your stateSchema in-order validation works. validator prop accepts a func that you can be use to validate your state via regEx.
const stateValidatorSchema = { first_name: { required: true, validator: { func: value => /^[a-zA-Z]+$/.test(value), error: 'Invalid first name format.', }, }, last_name: { required: true, validator: { func: value => /^[a-zA-Z]+$/.test(value), error: 'Invalid last name format.', }, }, tags: { required: true, validator: { func: value => /^(,?\w{3,})+$/.test(value), error: 'Invalid tag format.', }, }, }; Passed your stateSchema and stateValidatorSchema in useForm hooks. 3rd parameter is (optional) callback function to be called when you submit your form if all fields is valid.
const { values, errors, handleOnChange, handleOnSubmit, disable } = useForm(stateSchema, stateValidatorSchema, onSubmitForm); Working demo here.
Feel free to contribute in this project.
This project is under MIT License.