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!
See the wiki for further documentation.
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!