JSPM – react-validify@5.1.3

Package Exports

react-validify

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-validify) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Validify

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

Install

npm install react-validify@5.0.2

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!