Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-formguards with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. require("@types/react/package.json"); // @types/react is a peer dependency. var reactFormguards = require("react-formguards")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-formguards v1.0.8

Simple client side form validation

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!

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free