JSPM – react-validify@5.0.0-beta2

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

Install

npm install react-validify@5.0.0-beta2

V5 Hooks

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 './form/hook';

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, values, validateAll } = useSubmit();

  return (
    <div
      onClick={() => {
        if (canSubmit) return console.log('submit!', values);
        validateAll();
      }}
      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!