Skip to content
Simple-as-possible React form validation
JavaScript HTML
Branch: master
Clone or download
Latest commit b96da1c Sep 29, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Remove flatmap for better support Apr 28, 2019
src new version Aug 31, 2019
.all-contributorsrc Add @audiolion as a contributor Aug 10, 2017
.babelrc First npm release Aug 4, 2017
.gitignore Add support for nested fields Aug 7, 2019
.npmignore
LICENSE Create LICENSE Sep 6, 2017
README.md Update README.md Sep 29, 2019
circle.yml Add 100% test coverage and coveralls Aug 8, 2017
package-lock.json Fix required check Aug 25, 2019
package.json new version Aug 31, 2019
polyfill.js Update for 16, use React.Fragment Apr 12, 2018
test-setup.js Update for 16, use React.Fragment Apr 12, 2018

README.md

React Validify

CircleCI Coverage Status

No dependencies, simplest way to validate and manage form state with hooks!

Install

npm install react-validify

V5 Hooks

Messing around with a new syntax that keeps it easy to wrap your own inputs. This api lets you trigger a blur event when needed, which will trigger initial validation. If there are errors from that, typing onChange will validate until there are no longer errors. Still need to support a few more cases and add tests

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' });
  // console.log(fields, 'herere');
  return (
    <Form
      values={values}
      onValues={setValues}
      rules={{
        email: [required, email],
        date1: [greaterThanDate2],
        name: [required],
      }}
    >
      <Input name="email" />
      <Input name="name" />
      <Input name="date1" />
      <Input name="date2" />
      <Submit />
    </Form>
  );
};

Add useField to your own inputs inside the Form wrapper:

import React from 'react';
import { useField } from 'react-validify';

export default props => {
  let { handleChange, handleBlur, value, errors } = useField(props.name);

  return (
    <div>
      {errors ? <p>{errors[0]}</p> : null}
      <input
        {...props}
        value={value}
        onBlur={handleBlur}
        onChange={event => handleChange(event.target.value)}
      />
    </div>
  );
};

Add useSubmit to trigger submitting or validating

import React from 'react';
import { useSubmit } from 'react-validify';

const Submit = props => {
  let { canSubmit, handleSubmit } = useSubmit();

  return (
    <div
      onClick={() => handleSubmit(values => console.log('submit!', values))}
      style={{ opacity: canSubmit ? 1 : 0.5 }}
    >
      Submit Form
    </div>
  );
};
export default Submit;

Create rules, super quick:

const testRule = (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.

Contributors

Thanks goes to these wonderful people (emoji key):


Zach Silveira


Ryan Castner

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

You can’t perform that action at this time.