# hook-form-validator

> This is the Validator hook to easily and fastest way to validate the fields in React forms

Latest version **1.1.0** (published 2023-01-31) · ISC license · 0 weekly downloads

## Install

```sh
npm install hook-form-validator
pnpm add hook-form-validator
yarn add hook-form-validator
bun add hook-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.1.0 |
| Published | 2023-01-31 |
| First published | 2022-10-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | pruthvish |
| Maintainers | pruthvish98 |
| Keywords | hook-form, validation, form-validator |

## Links

- npm: https://www.npmjs.com/package/hook-form-validator
- Repository: https://github.com/pruthvish98/hook-form-validator
- Homepage: https://github.com/pruthvish98/hook-form-validator#readme
- Issues: https://github.com/pruthvish98/hook-form-validator/issues
- npm.io page: https://npm.io/package/hook-form-validator

## 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.1.0 (latest) — 2023-01-31
- 1.0.0 — 2022-10-11

## README

# hook-form-validator

A fast and lightweight,free and open-source validation library for ReactJS that addresses three primary form creation pain points: State manipulation. Form Validation (error message) Form Submission.

This library consists wrapper React components over <a href="https://github.com/pruthvish98/hook-form-validator"> hook-form-validator </a> library.

**Show**
### <a href="https://react-validation-hook.vercel.app/">Demo page</a>

### Installation

```shell
npm i hook-form-validator
```

```shell
npm i deepmerge
```

## Usage

#### JSX


```jsx
import React, { Component } from 'react';
import * as Yup from "yup";
import useValidator  from 'hook-form-validator';

export default function App() {

  const onSubmit = () => {
   // here you will get the validated data
   console.log(values)
  }

  const {
    values,
    setValues,
    touched,
    errors,
    handleSubmit,
    getFieldProps,
  } = useValidator({
    initialValues: {
      username: "",
      email: "",
    },
    validationSchema: Yup.object({
      username: Yup.string().required("User Name is Required."),
      email: Yup.string().email().required("Email is Required."),
    }),
    onSubmit,
  });


  return (
    <>
        <form onSubmit={handleSubmit}>
          <div>
             <input type="text" name="username" {...getFieldProps("username")} />
             {(touched?.username && errors?.username) && <div>{errors?.username}</div>}
          </div>

          <div>
             <input type="text" name="email" {...getFieldProps("email")} />
             {(touched?.email && errors?.email) && <div>{errors?.email}</div>}
          </div>
  
          <button type="submit">
            Save
          </button>
        </form>
    </>
  );
}
```

## API

### **Container**

Component that contains the draggable elements or components. Each of its children should be wrapped by **Draggable** component


### Function

| Property | Type | Default | Description |
|-|:-:|:-:|-|
|values|object|`{}`| Get updated values
|errors|object|`{}` | Get all the errors
|touched|object|`{}`| It helps to display error based on blur event
|setValues|function|`undefined`| Update the values
|getFieldProps|function|`undefined`| You can directly pass this function for handle the value
|setErrors|function|`undefined`| It helps to update errors manually. 
|handleChange|function|`undefined`| It trigger the manually onChange function with help of createFakeEvent
|handleBlur|function| `undefined` | It trigger the manually onBlur function with help of createFakeEvent
|handleSubmit|function|`undefined`| You have pass this function in form tag
|createFakeEvent|function|`undefined`| It will helps to trigger fake event

---


---

### handleSubmit
  You have pass this function in form tag with the help of this function it trigger when submit button is clicked & check for errors & trigger the onSubmit function which is provided by our hook

```js

You can see the example to use handleSubmit

```

#### Parameters
- **handleSubmit** : `handleSubmit`  




### setValues
 
This function use to update the initialValues  


```
setValue({...values,[key]:[value]})
```

```js
const App = () => {
  const {
     setValues,
     handleSubmit,
     getFieldProps,
  } = useValidator({
    initialValues: {
      firstName: "",
    },
    validationSchema: Yup.object({
      firstName: Yup.string().required("User Name is Required."),
    }),
    onSubmit,
  });
    return (
    <form>
      <input {...getFieldProps("firstName")} />
      <button type="button" onClick={() => setValue("firstName", "Bill")}>
        setValue
      </button>
    </form>
  );
};
```


#### Parameters
- **payload** : `object` 

---

### getFieldProps
 
You can directly pass this function for handle the value

```js

<input {...getFieldProps('firstName')} />
```

#### Parameters
- **onChange** : `ChangeHandler`  onChange prop to subscribe the input change event.
- **onBlur** : `ChangeHandler`    onBlur prop to subscribe the input blur event.
- **ref** : `React.Ref<any>`      Input reference for hook form to register.
- **name** : `string`             Input's name being registered.



---

### setErrors
 
The function allows you to manually set one or more errors with your custom message.

```js
setErrors({...errors,[key]:[message]})
```

#### Parameters
- **errors** : `errors`  Set an error with its type and message.




---

### handleChange
  It trigger the manually onChange function with help of createFakeEvent.

```js
<input 
  onChange={(e) => {
    handleChange("firstName")(createFakeEvent(e));
  }}
/>

```

#### Parameters
- **handleChange** : `handleChange`  



---

### handleBlur
  It trigger the manually onBlur function with help of createFakeEvent.

```js
<input 
  onChange={(e) => {
    handleBlur("firstName")(createFakeEvent(e));
  }}
/>

```

#### Parameters
- **handleBlur** : `handleBlur`

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