Simple, declarative, client side form validation - 2.5kb minzipped
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 { ValidatedForm, FormGuard, validators } from 'react-formguards'
const ExampleBasic = () => {
return (
<ValidatedForm onSubmit={(e, formVals) => console.log(formVals)}>
<label htmlFor='example1-name'>Name:</label>
<input type='text' name='name' id='example1-name' />
<label htmlFor='example1-email'>Email:</label>
<FormGuard watches='email' validatesWith={validators.required} >
Email is required
</FormGuard>
<FormGuard watches='email' validatesWith={validators.email} >
Please enter a valid email address
</FormGuard>
<input type='email' name='email' id='example1-email' />
<label htmlFor='example1-phone'>Telephone:</label>
<FormGuard watches='phone' validatesWith={validators.phone} >
Please enter a valid phone number
</FormGuard>
<input type='tel' name='phone' id='example1-phone' />
<label htmlFor='example1-comments'>Comments:</label>
<FormGuard watches='comments' validatesWith={validators.maxLength(80)} >
Maximum length (80 characters) exceeded
</FormGuard>
<textarea name='comments' id='example1-comments' />
<input type='submit' value='Check the console for onSubmit' />
</ValidatedForm>
);
}
export default ExampleBasic;MIT © Michael Lasky
Thanks goes to these wonderful people (emoji key):
 Michael Lasky 🚇 |
This project follows the all-contributors specification. Contributions of any kind welcome!