Simple-as-possible React form validation
JavaScript HTML
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

React Validify

CircleCI Coverage Status


Validating form inputs in React is one of two things. A manual process that you build into every app, or something you get from pulling in a huge library. This package aims to provide form validation with the smallest amount of code change to your apps! Make a small field wrapper that receives input props and handles error messages, set some rules, and that's it!


npm install react-validify
import { Form } from 'react-validify'

    email: 'email|required',
    password: 'required|min:8'
  <Input name="email" />
  <Input name="password" type="password" />

    onClick={values =>
        'this will be called if validation passes',


This component is the simplest way to validate form inputs in React. There's two things to learn. The Form accepts a prop called rules. This is an object with the names of all yours inputs and the rules for them. Rules can be found here. Place the submit prop on any element that you want to trigger the validation. The onClick will not be triggered until the rules pass. If validation fails, error messages will be passed to the inputs as an error prop.


  1. Import Form
  2. Build a wrapper around inputs. It needs to handle when there's an error passed in:
export default ({ error, ...props }) => (
    <input {...props} />
  1. Add a submit button inside the form with the submit prop.
  2. That's it!


If you need access to values and errors, import { BaseForm} from 'react-validify', which lets you pass onValues, onErrors, values, and, errors as props. See example


You can see a list of rules here


Custom error messages. You can see how these work here

  '': 'Custom error message',
  'min.password': 'Custom min password required error message.'


exposes the values on change, you must manage the form state by passing in values if using this. Ex: values={this.state.values} must be passed too, if using the example below)

onValues={values => this.setState({ values })}


Set values when the form is first rendered.

values={{name: 'set'}}


Triggers a submit when enter is pressed on an input

<Input name="email"  onEnter={this.submit}/>


Custom attribute names. You can see how these work here. Currently does not support validatorjs's attributeFormatter.

  email: 'Email address'


Set errors manually, in case the server comes back with messages.

errors={{name: 'Email is invalid...'}}


Thanks goes to these wonderful people (emoji key):

Zach Silveira

Ryan Castner

This project follows the all-contributors specification. Contributions of any kind welcome!