https://github.com/zackify/validify

Simple-as-possible React form validation
https://github.com/zackify/validify

form form-validation form-validation-react react react-native

Last synced: 18 days ago
JSON representation

Simple-as-possible React form validation

• Host: GitHub
• URL: https://github.com/zackify/validify
• Owner: zackify
• License: mit
• Created: 2017-08-04T15:24:48.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T04:27:53.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T13:15:13.296Z (about 1 month ago)
• Topics: form, form-validation, form-validation-react, react, react-native
• Language: TypeScript
• Homepage:
• Size: 2.88 MB
• Stars: 280
• Watchers: 7
• Forks: 15
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## React Validify

single dependency, simplest way to validate and manage form state with hooks in React + React Native! With full test coverage and TS support.

## Contents

- [Install](#install)

- [Getting Started](#getting-started)

- [TypeScript Support](#typescript-support)

- [Contributors](#contributors)

## Install

```

npm install react-validify lodash

```

## Getting Started

This api has been carefully thought out over the past year. It's been in use on multiple React websites and React Native mobile applications. Using the library is simple. Include the `Form` component, and wrap your `input`'s and `submit` buttons.

```js

import Input from "./input";

import Submit from "./submit";

import { Form, rules } from "react-validify";

const { required, email } = rules;

const App = () => {

  let [values, setValues] = React.useState({

    email: "test",

    nested: { test: "this is nested" },

  });

  return (

    

      

      

      

      

      

      

    

  );

};

```

Add `useField` to your own inputs inside the Form wrapper. This allows you to use the library with any type of input field.

It just needs to support a `handleChange` `handleBlur` and `value` prop. This is the `Input` component you see in the first example. Don't forget to pass the field `name` to the hook.

```js

import React from "react";

import { useField, FieldProps } from "react-validify";

type Props = { placeholder: string } & FieldProps;

const Input = ({ name, rules, placeholder }: Props) => {

  let { handleChange, handleBlur, value, errors } = useField({ name, rules });

  return (

    


      {errors ? 
{errors[0]}
 : null}

       handleChange(event.target.value)}

      />

    

  );

};

```


Add `useSubmit` to trigger submitting or validating:

```js

import React from "react";

import { useSubmit } from "react-validify";

const Submit = (props) => {

  let { canSubmit, handleSubmit } = useSubmit();

  return (

    
 handleSubmit((values) => console.log("submit!", values))}

      style={{ opacity: canSubmit ? 1 : 0.5 }}

    >

      Submit Form

    

  );

};

export default Submit;

```


The callback passed to `handleSubmit` will only be triggered if validation is passing.

Create rules:

```js

const testRule: RuleFn = (value, values) =>

  value.length > values.date2.length ? "Date can't be longer" : null;

```

Rules get a `value` and `values` arguments. This means you can validate an input, or validate it against other form values.

Rules are guaranteed to run on a field after the first time the field is blurred, and then any time an error is present, they will run onChange.

## TypeScript Support

With TS enabled, you can create a type for your form values, like so:

```tsx

type Values = {

  email: string;

  date1?: string;

  name?: string;

};

```

Now when we use the form, it looks like this:

```tsx

let [values, setValues] = useState({

    email: 'test',

  });

  return (

    

      

    

  )

}

```

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

| [
Zach Silveira](https://zach.codes)
 | [
Ryan Castner](http://audiolion.github.io)
 |

| :---------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------: |

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!