# react-invalidate

> Validation library for react based forms

Latest version **1.2.1** (published 2017-03-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-invalidate
pnpm add react-invalidate
yarn add react-invalidate
bun add react-invalidate
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2017-03-16 |
| First published | 2017-03-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Cole Voss |
| Maintainers | colevoss |
| Keywords | react, validator, validation, validate |

## Links

- npm: https://www.npmjs.com/package/react-invalidate
- Repository: https://github.com/colevoss/react-invalidate
- Homepage: https://github.com/colevoss/react-invalidate#readme
- Issues: https://github.com/colevoss/react-invalidate/issues
- npm.io page: https://npm.io/package/react-invalidate

## Alternatives

- [@regle/core](https://npm.io/package/@regle/core.md) — 47.0K weekly downloads
- [typeof-arguments](https://npm.io/package/typeof-arguments.md) — 12.5K weekly downloads
- [@lokalise/projects-engine-contracts](https://npm.io/package/@lokalise/projects-engine-contracts.md) — 978 weekly downloads
- [@osjwnpm/nam-laboriosam-quibusdam](https://npm.io/package/@osjwnpm/nam-laboriosam-quibusdam.md) — 70 weekly downloads
- [@oridune/validator](https://npm.io/package/@oridune/validator.md) — 16 weekly downloads

## Recent versions

- 1.2.1 (latest) — 2017-03-16
- 1.2.0 — 2017-03-15
- 1.1.1 — 2017-03-13
- 1.1.0 — 2017-03-13
- 1.0.2 — 2017-03-12
- 1.0.1 — 2017-03-12
- 1.0.0 — 2017-03-12

## README

# React Invalidate [![Build Status](https://travis-ci.org/colevoss/react-invalidate.svg?branch=master)](https://travis-ci.org/colevoss/react-invalidate) [![npm](https://img.shields.io/npm/v/react-invalidate.svg)](https://www.npmjs.com/package/react-invalidate) [![npm](https://img.shields.io/npm/dm/react-invalidate.svg)](https://www.npmjs.com/package/react-invalidate) [![codecov](https://codecov.io/gh/colevoss/react-invalidate/branch/master/graph/badge.svg)](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`


## 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 }) => (
  <Validator validators={requiredValidator}>
    {({ validate, isValid, message }) => (
      <div>
        <input
          type="text"
          value={inputValue}
          className={isValid ? 'normal-input' : 'invalid-input'}
          onBlur={e => validate(e.target.value)}
        />

        {message && <div>{message}</div>}
      </div>
    )}
  </Validator>
)
```

### 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 }) => (
  <ValidationProvider>
    <div>
      <Validator validators={requiredValidator} id="first-name">
        {({ validate, isValid, message }) => (
          <div>
            <input
              type="text"
              name="first-name"
              value={inputValue}
              className={isValid ? 'normal-input' : 'invalid-input'}
              onBlur={e => validate(e.target.value)}
            />

            {message && <div>{message}</div>}
          </div>
        )}
      </Validator>

      <Validator validators={requiredValidator} id="last-name">
        {({ validate, isValid, message }) => (
          <div>
            <input
              type="text"
              name="last-name"
              value={inputValue}
              className={isValid ? 'normal-input' : 'invalid-input'}
              onBlur={e => validate(e.target.value)}
            />

            {message && <div>{message}</div>}
          </div>
        )}
      </Validator>

      <FormSubmitButton onClick={onSubmit} />
    </div>
  </ValidationProvider>
);

export default Form;
```

**FormSubmitButton.jsx**
```javascript
import { connectToValidator } from 'react-invalidate';

const FormSubmitButton = ({ onClick }) => (
  <button onClick={onClick}>Submit Form</button>
);


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.


### Todo:
* Fully document each component
* Research integrations with [valerie](https://github.com/developerdizzle/valerie)

---
_Source: https://npm.io/package/react-invalidate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._