# easy-react-form-validator

> A simple light-weight react form validator

Latest version **1.2.0** (published 2021-11-11) · 0 weekly downloads

## Install

```sh
npm install easy-react-form-validator
pnpm add easy-react-form-validator
yarn add easy-react-form-validator
bun add easy-react-form-validator
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2021-11-11 |
| First published | 2021-08-13 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Deep Shrestha |
| Maintainers | deeps83 |

## Links

- npm: https://www.npmjs.com/package/easy-react-form-validator
- npm.io page: https://npm.io/package/easy-react-form-validator

## Recent versions

- 1.2.0 (latest) — 2021-11-11
- 1.1.0 — 2021-08-19
- 1.0.2 — 2021-08-14
- 1.0.0 — 2021-08-13

## README

# What is this

A very simple light-weight react form validator for all react developers. It can be used as a custom hooks.

# Pre-requisites

Need to install nodejs from 'https://nodejs.org'

# Installation

```
To add this package in dependencies
npm i easy-react-form-validator -S or --save 

To add this package in devDependencies
npm i easy-react-form-validator -D or --save-dev

```

# Usage

```
import {useFormValidator, errorMessage} from 'easy-react-form-validator';

const initialState = {
    mode: <optional>, 	// String value ( 'I' => insert or 'U' => update )
    fullName: '',
    address: '',
    email: '',
    password: '',
    errors: {
        fullName: '',
        email: '',
        password: ''
    }
};

The property "mode" is an optional. However, it can be used while validating forms with insert and update methods.

const {
    onHandleChange,
    onHandleSubmit,
    onHandleBlur,
    fields
} = useFormValidator(initialState)

const { errors } = fields

Where,

The properties of an object "initialState" must be the form input elements. The "errors" property is used to validate the input form elements.

For Example:

1. Create input type element
2. Do not forget to add input properties such as name and placeholder
3. Add the handler functions to validate the form such as onHandleSubmit, onHandleChange, onHandleBlur
4. To display the error, add a div underneath each input type element.

For Example:

<form className="..." onSubmit={onHandleSubmit}>
    <input type="text" 
           name="fullName" 
           placeholder="Full Name" 
           onChange={onHandleChange} 
           onBlur={onHandleBlur} />
    <div className="...">
        {errors.fullName.length > 0 && errorMessage(errors.fullName) }
    </div>

    <input type="email"
           name="email" placeholder="Email" 
           onChange={onHandleChange} 
           onBlur={onHandleBlur} />
    <div className="...">
        {errors.email.length > 0 && errorMessage(errors.email) }
    </div>
    ...
    ...
</form>

```

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