react-formguards

Simple, declarative, client side form validation - 3kb minzipped

The Problem

Client side form validation is a pain in the butt. Many solutions are complex, cumbersome, or both. Form validation should be simple.

The Solution

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!

Install

npm install --save react-formguards

Usage

• 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;

License

MIT © Michael Lasky

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!