https://github.com/colevoss/react-invalidate
React Form Validation
https://github.com/colevoss/react-invalidate
form react validation
Last synced: about 1 year ago
JSON representation
React Form Validation
- Host: GitHub
- URL: https://github.com/colevoss/react-invalidate
- Owner: colevoss
- License: mit
- Created: 2017-03-11T23:35:48.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-04T03:46:09.000Z (about 9 years ago)
- Last Synced: 2024-04-24T23:22:19.783Z (about 2 years ago)
- Topics: form, react, validation
- Language: JavaScript
- Size: 106 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Invalidate [](https://travis-ci.org/colevoss/react-invalidate) [](https://www.npmjs.com/package/react-invalidate) [](https://www.npmjs.com/package/react-invalidate) [](https://codecov.io/gh/colevoss/react-invalidate)
React Invalidate is an easy, yet flexible way to add validation to any form in your React projects.
## Instalation
* npm: `npm install --save react-invalidate`
* yarn: `yarn add react-invalidate`
## Example
Checkout the [react-invalidate-sandbox](https://github.com/colevoss/react-invalidate-sandbox) repo to see it in action.
## Usage
### Single Field Validation
If you want to validate one field, you can do so with the `Validator` component. You can supply the `Validator`
component with one or more validator functions as well as a functional child that renders the field to be validated.
The child function receives an object with a `validate` function, the validation status as `isValid`, and the failed
validation message provided by the validator(s). You can call the validate function on any of the input's events
and when the validation is complete it will update the `isValid` and `message` values.
```javascript
import { Validator } from 'react-invalidate';
const requiredValidator = (value: any, message: string = 'Required') => (
!!value ? true : Promise.reject(message);
);
const SomeInput = ({ inputValue }) => (
{({ validate, isValid, message }) => (
validate(e.target.value)}
/>
{message &&
{message}}
)}
)
```
### Form Validation
If you want to have a form with multiple validated inputs, where a certain action would validate all the fields, you
can wrap the form in the `ValidationProvider` component. This uses a `react-redux` style subscription model to keep track
of each field wrapped in a `Validator` component that is a child of the `ValidationProvider`.
To gain access to the central validator, you can wrap any component in the `connectToValidator` higher order component
to call the global `validate` function and get data about the validation status of the form.
**Form.jsx**
```javascript
import { ValidationProvider, Validator } from 'react-invalidate';
import { requiredValidator } from '../path/to/validators';
import FormSubmitButton from '../path/to/FormSubmitButton';
const Form = ({ onSubmit }) => (
{({ validate, isValid, message }) => (
validate(e.target.value)}
/>
{message &&
{message}}
)}
{({ validate, isValid, message }) => (
validate(e.target.value)}
/>
{message &&
{message}}
)}
);
export default Form;
```
**FormSubmitButton.jsx**
```javascript
import { connectToValidator } from 'react-invalidate';
const FormSubmitButton = ({ onClick }) => (
Submit Form
);
const mapValidatorToProps = (validator, ownProps) => ({
onClick: async () => {
const isValid = await validator.validate();
if (!isValid) return false;
ownProps.onClick();
},
})
export default connectToValidator(mapValidatorToProps)(FormSubmitButton);
```
In the example above, the `FormSubmitButton` will run validations for all `Validator` wrapped inputs in the form. If
it returns `false`, it will not submit the form because it never gets to the `ownProps.onClick` function.
Inversely, if all fields are valid, it will call it's `onClick` function and everything will be grand.
Since the button runs all of the field validations, each field will be automatically updated with is new `isValid` status
and failed validation `message` and update showing accordingly.
### Asyc Validations
Since validations can return promises, you can write asynchronous validators with relative ease. Say we wanted to validate
that a user's email is unique at signup, we would need to write a validator that makes a call to some back end to check for
email uniqueness.
**uniqueEmailValidator.js**
```javascript
const uniqueEmailValidator = async (email: string, message: string = 'Email must be unique') => {
const isEmailUnique = await checkEmailUniquenessWithServer(email);
if (!isEmailUnique) throw message; // Same as returning a rejected promise
return isEmailUnique;
};
export default uniqueEmailValidator;
```
**form.jsx**
```javascript
import uniqueEmailValidator from '../path/to/uniqueEmailValidator';
import requiredValidator from '../path/to/requiredValidator';
const SomeInput = ({ inputValue }) => (
{({ validate, isValid, message }) => (
validate(e.target.value)}
/>
{message &&
{message}}
)}
)
```
Now, when this field is blurred, it will run the required validator and the uniqueEmailValidator. If the field is blank
the requiredValidator will throw first and show the required message. If the field is not blank, the uniqueEmailValidator
will be ran and fail if the email is not unique, updating the `isValid` and `message` args appropriately.
### Todo:
* Fully document each component
* Research integrations with [valerie](https://github.com/developerdizzle/valerie)