# react-use-form-validate

> Super customizable validation library for forms in react

Latest version **1.3.2** (published 2022-06-30) · MIT license · 0 weekly downloads

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

## Install

```sh
npm install react-use-form-validate
pnpm add react-use-form-validate
yarn add react-use-form-validate
bun add react-use-form-validate
```

## Health

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

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.3.2 |
| Published | 2022-06-30 |
| First published | 2021-12-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 1 |
| Unpacked size | 75.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | himanshubhardwaz |
| Maintainers | himanshu76200 |
| Keywords | react, form, validate, form validation in react, react forms |

## Links

- npm: https://www.npmjs.com/package/react-use-form-validate
- Repository: https://github.com/himanshubhardwaz/react-use-form-validate
- Homepage: https://github.com/himanshubhardwaz/react-use-form-validate#readme
- Issues: https://github.com/himanshubhardwaz/react-use-form-validate/issues
- npm.io page: https://npm.io/package/react-use-form-validate

## Dependencies (1)

- [use-deep-compare-effect](https://npm.io/package/use-deep-compare-effect.md) ^1.8.1

## 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

- 1.3.2 (latest) — 2022-06-30
- 1.3.1 — 2022-04-10
- 1.3.0 — 2022-04-09
- 1.2.4 — 2021-12-26
- 1.2.3 — 2021-12-26
- 1.2.2 — 2021-12-26
- 1.2.1 — 2021-12-24
- 1.2.0 — 2021-12-24
- 1.1.0 — 2021-12-24
- 1.0.0 — 2021-12-24

## README

# react-use-form-validate

> Super customizable validation library for forms in react

[![NPM](https://img.shields.io/npm/v/react-use-form-validate.svg)](https://www.npmjs.com/package/react-use-form-validate) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-use-form-validate
```

## Usage

```jsx
import React from 'react'
import { useValidation } from "react-use-form-validate"

const validationFunction = (value) => {
  return value === 'abc';
}

const App = () => {
  let config = {
    fields: {
      email: {
        isRequired: { message: 'Email is Required' },
        isEmail: { message: 'Please enter a valid Email address' }
      },
      password: {
        isRequired: { message: 'Password is Required' }
      },
      maxField: {
        max: {
          message: 'Max size exceeded',
          length: 5
        }
      },
      minField: {
        min: {
          message: 'Min size not fulfilled',
          length: 5
        },
      },
      equalField: {
        equals: {
          message: 'Does not match expected value',
          value: 'React'
        }
      },
      regexField: {
        pattern: {
          message: 'You can only enter alphabets in this field',
          regex: /^[A-Za-z]+$/
        }
      },
      validatorField: {
        customValidator: {
          message: 'Validation failed by validator function',
          validator: validationFunction,
        }
      },
    },
    onSubmit: context => {
      if (context.isFormValid) {
        console.log('Form is valid and ready to be submitted')
      } else {
        console.log('Form is valid and ready to be submitted')
      }
    },
    showErrors: 'blur'
  }

  const { getFieldProps, getFormProps, errors } = useValidation(config)

  return (
    <form {...getFormProps()}>
      <input
        {...getFieldProps('email')}
        type='text'
        placeholder='Email'
      />
      {
        errors.email &&
        <div>
          <p>
            {/* {errors.email ? errors.email : submittedErrors.email} */}
            {errors.email}
          </p>
        </div>
      }

      <div>
        <input
          {...getFieldProps('password')}
          type='password'
          placeholder='Password'
        />
        {
          errors.password &&
          <div>
            <p>
              {errors.password}
            </p>
          </div>
        }
      </div>

      <div>
        <input
          {...getFieldProps('maxField')}
          type='text'
          placeholder='Max 5 char'
        />
        {
          errors.maxField &&
          <div>
            <p>
              {errors.maxField}
            </p>
          </div>
        }
      </div>

      <div>
        <input
          {...getFieldProps('minField')}
          type='text'
          placeholder='min 5 char'
        />
        {
          errors.minField &&
          <div>
            <p>
              {errors.minField}
            </p>
          </div>
        }
      </div>

      <div>
        <input
          {...getFieldProps('equalField')}
          type='text'
          placeholder='Enter react'
        />
        {
          errors.equalField &&
          <div>
            <p>
              {errors.equalField}
            </p>
          </div>
        }
      </div>

      <div>
        <input
          {...getFieldProps('regexField')}
          type='text'
          placeholder='Enter only alphabets in this field'
        />
        {
          errors.regexField &&
          <div>
            <p>
              {errors.regexField}
            </p>
          </div>
        }
      </div>

      <div>
        <input
          {...getFieldProps('validatorField')}
          type='text'
          placeholder='Only accepted value is: "abc"'
        />
        {
          errors.validatorField &&
          <div>
            <p>
              {errors.validatorField}
            </p>
          </div>
        }
      </div>

      <div>
        <button
          type='submit'
        >
          SUBMIT
        </button>
      </div>
    </form >
  )
}

export default App
```

## License

MIT © [himanshubhardwaz](https://github.com/himanshubhardwaz)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).

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