Async Validation

This is an example of asynchronous validations.
drip-form-validator can register asynchronous validation with the registerAsyncRule() method.

Asynchronous validation is performed under the following conditions.

• If all synchronous verification corresponding to name has passed
• When the input.onBlur() was executed

Example:

Values:

{}

Sample Code:

import React from 'react';
import { dripForm, Validator } from 'react-drip-form';
import { Input } from 'react-drip-form-components';


// Simulate API
Validator.registerAsyncRule('checkValidAccount', value => new Promise((resolve, reject) => {
  const whiteList = ['foo', 'bar', 'baz'];

  setTimeout(() => {
    if (whiteList.indexOf(value) > -1) {
      resolve();
    } else {
      reject('Invalid account!');
    }
  }, 1000);
}));


const AsyncValidationForm = dripForm({
  validations: {
    username: {
      required: true,
      between: {
        min: 3,
        max: 30,
      },
      alphaNumeric: true,
      lowercase: true,
      checkValidAccount: true,
    },
    displayName: {
      required: true,
    },
  },
})(({
  handlers,
  meta: { invalid, pristine, validating },
}) => (
  <form onSubmit={handlers.onSubmit}>
    <div>
      <label htmlFor="username">Username</label>
      <Input
        type="text"
        id="username"
        name="username"
        label="Username"
      />
    </div>

    <div>
      <label htmlFor="displayName">Display Name</label>
      <Input
        type="text"
        id="displayName"
        name="displayName"
        label="Display Name"
      />
    </div>

    <Button
      primary
      onClick={handlers.onSubmit}
      disabled={invalid || pristine || validating}
    >
      Submit
    </Button>
  </form>
));