npm

Need private packages and team management tools?Check out npm Orgs. »

react-formguards

1.0.8 • Public • Published

react-formguards

Simple, declarative, client side form validation

NPM SIZE SIZE Build Status All Contributors

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!

import React from 'react';
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):

Michael Lasky
Michael Lasky

🚇 ⚠️ 📖 🚧 💻

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

install

npm i react-formguards

Downloadsweekly downloads

48

version

1.0.8

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability