Simple, declarative, client side form validation
Client side form validation is a pain in the butt. Many solutions are complex, cumbersome, or both. Form validation should be simple.
react-formguards is powerful and very easy to use. Simple or complex validation rules can be declaratively defined with only <FormGuard> tags. Just add FormGuards and you're done!
npm install --save react-formguards
Replace your <form> tag with <ValidatedForm>, passing an onSubmit callback.
- onSubmit is only called when all the FormGuard's are satisfied, which means the form is valid
Add <FormGuard> tags anwhere you'd like validation errors to appear. The FormGuards handle everything else for you.
Check out the Live Examples to see it in action!
import React from 'react';import ValidatedForm FormGuard validators from 'react-formguards'const ExampleBasic =return<ValidatedForm =><label ='example1-name'>Name:</label><input ='text' ='name' ='example1-name' /><label ='example1-email'>Email:</label><FormGuard ='email' = >Email is required</FormGuard><FormGuard ='email' = >Please enter a valid email address</FormGuard><input ='email' ='email' ='example1-email' /><label ='example1-phone'>Telephone:</label><FormGuard ='phone' = >Please enter a valid phone number</FormGuard><input ='tel' ='phone' ='example1-phone' /><label ='example1-comments'>Comments:</label><FormGuard ='comments' = >Maximum exceeded</FormGuard><textarea ='comments' ='example1-comments' /><input ='submit' ='Check the console for onSubmit' /></ValidatedForm>;;
MIT © Michael Lasky
Thanks goes to these wonderful people (emoji key):
🚇 ⚠️ 📖 🚧 💻
This project follows the all-contributors specification. Contributions of any kind welcome!