# react-revalidator

> React mixin for form validation base on revalidator

Latest version **0.1.1** (published 2015-05-27) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

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

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2015-05-27 |
| First published | 2015-05-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| Author | Minh Tran |
| Maintainers | vn38minhtran |
| Keywords | react-component, react, component, react-validator, react-revalidator, react-form, react-validation |

## Links

- npm: https://www.npmjs.com/package/react-revalidator
- Repository: https://github.com/vn38minhtran/react-revalidator
- Issues: https://github.com/vn38minhtran/react-revalidator/issues
- npm.io page: https://npm.io/package/react-revalidator

## Dependencies (7)

- [classnames](https://npm.io/package/classnames.md) ^2.1.1
- [lodash.find](https://npm.io/package/lodash.find.md) ^3.2.1
- [object-path](https://npm.io/package/object-path.md) ^0.9.2
- [revalidator](https://npm.io/package/revalidator.md) ^0.3.1
- [lodash.result](https://npm.io/package/lodash.result.md) ^3.1.2
- [lodash.isempty](https://npm.io/package/lodash.isempty.md) ^3.0.4
- [lodash.isobject](https://npm.io/package/lodash.isobject.md) ^3.0.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2015-05-27
- 0.1.0 — 2015-05-26

## README

# React Revalidator

React mixin for form validation base on [revalidator](https://github.com/flatiron/revalidator).

## Installation

```bash
npm install --save react-revalidator
```

## Usage

```js
var RevalidatorMixin = require('react-revalidator');
var UpdateStateMixin = require('react-revalidator/lib/UpdateStateMixin');

var Component = React.createClass({
  mixins: [RevalidatorMixin, UpdateStateMixin],
  revalidatorSchema: {
    example: {
      type: 'object',
      required: true,
      properties: {
        name: {
          type: 'string',
          required: true,
          allowEmpty: false,
          minLength: 6
        },
        email: {
          type: 'string',
          required: true,
          format: 'email'
        }
      }
    }
  },
  getInitialState: function () {
    return {
      example: {}
    };
  },
  handleNameChange: function (e) {
    this.updateState({
      'example.name': e.target.value
    }, function () {
      this.validate('example.name');
    });
  },
  handleEmailChange: function (e) {
    this.updateState({
      'example.email': e.target.value
    }, function () {
      this.validate('example.email');
    });
  },
  handleSubmit: function (e) {
    e.preventDefault();
    console.log('example: ', this.state.example);
  },
  handleReset: function (e) {
    e.preventDefault();
    this.setState({
      example: {}
    });
    this.resetValidation();
  },
  render: function () {
    return (
      <form>
        <div className={this.getFieldClass('example.name')}>
          <label className='control-label'>Name</label>
          <input type='text' className='form-control'
            value={this.state.example.name}
            onChange={this.handleNameChange}/>
          {this.renderFieldMessages('example.name')}
        </div>
        <div className={this.getFieldClass('example.email')}>
          <label className='control-label'>Email</label>
          <input type='text' className='form-control'
            value={this.state.example.email}
            onChange={this.handleEmailChange}/>
          {this.renderFieldMessages('example.email')}
        </div>
        <button className='btn btn-primary' onClick={this.handleSubmit}
          disabled={!this.isDirty('example') || !this.isValid('example')}>
          Save
        </button>
        <button className='btn btn-default' onClick={this.handleReset}>
          Reset
        </button>
      </form>
    );
  }
});
```

See more `revalidatorSchema` infomation [here](https://github.com/flatiron/revalidator#schema).

## Methods

- resetValidation()
- validate(property)
- handleValidation(property)
- getErrors([property])
- isValid([property])
- isDirty([property])
- getFieldClass(property, [successClass, errorClass, defaultClass])
- renderFieldMessages(property, [className])

`property` use [object-path](https://github.com/mariocasciaro/object-path) format.

`successClass` default value is `has-success`.

`errorClass` default value is `has-error`.

`defaultClass` default value is `form-group`.

`className` default value is `help-block`.

## Example

See example folder or [demo](http://vn38minhtran.github.io/react-revalidator).

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