https://github.com/michaellasky/react-formguards

Simple, Declarative Client Side Form Validation
https://github.com/michaellasky/react-formguards

declarative form-validation javascript no-dependencies react reactjs

Last synced: 3 months ago
JSON representation

Simple, Declarative Client Side Form Validation

• Host: GitHub
• URL: https://github.com/michaellasky/react-formguards
• Owner: michaellasky
• License: mit
• Created: 2019-05-27T03:51:38.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T22:44:18.000Z (about 2 years ago)
• Last Synced: 2024-09-17T00:37:18.267Z (5 months ago)
• Topics: declarative, form-validation, javascript, no-dependencies, react, reactjs
• Language: JavaScript
• Size: 6.06 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-formguards

> Simple, declarative, client side form validation - 2.5kb minzipped

[![NPM](https://img.shields.io/npm/v/react-formguards.svg)](https://www.npmjs.com/package/react-formguards) [![SIZE](https://img.shields.io/bundlephobia/minzip/react-formguards/latest.svg)](https://bundlephobia.com/result?p=react-formguards) [![Build Status](https://travis-ci.com/michaellasky/react-formguards.svg?branch=master)](https://travis-ci.com/michaellasky/react-formguards) [![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#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

```bash

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](https://michaellasky.github.io/react-formguards/) to see it in action!

See the [wiki](https://github.com/michaellasky/react-formguards/wiki) for further documentation.

```jsx

import { ValidatedForm, FormGuard, validators } from 'react-formguards'

const ExampleBasic = () => {

    return (

         console.log(formVals)}>

            Name:

            

            Email:

            

                Email is required  

             

            

                Please enter a valid email address  

             

              

            

            Telephone:

            

                Please enter a valid phone number  

             

              

            Comments:

            

                Maximum length (80 characters) exceeded

             

              

            

            

        

    );

}

export default ExampleBasic;

```

## License

MIT © [Michael Lasky](https://github.com/NuclearHorseStudios)

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):


Michael Lasky
🚇 ⚠️ 📖 🚧 💻

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!