README.md

react-formstate-validation

A validation library for react-formstate

$ npm install react-formstate --save
$ npm install react-formstate-validation --save

Basic setup

import { FormState } from 'react-formstate';
import { validationAdapter } from 'react-formstate-validation';
validationAdapter.plugInto(FormState);

Usage

Inputs in these examples are designed to work with react-formstate. react-formstate-validation provides common validation functions that can be supplied to react-formstate's fluent validation API.

<Input
  formField='amount'
  label='Amount'
  required
  fsValidate={v => v.min(25).max(1000)}
  />

To tailor a message:

<Input
  required='Please provide an amount'
  fsv={v => v.min(25)
    .message('Amount must be at least $25')
    .max(1000)
    .msg('Amount cannot be more than $1000')}
  />

Validations

Except where starred, functions only accept string values, anything else will fail validation.

For details, see the code, it's very clear.

• email
• equals*
• greaterThan
• integer
• length*
• lessThan
• max
• maxLength*
• min
• minLength*
• number
• numeric
• regex
• required
• startsWith
• url

Aliases

export let aliases = [
  { name: 'equals', alias: 'eq' },
  { name: 'greaterThan', alias: 'gt' },
  { name: 'integer', alias: 'int' },
  { name: 'length', alias: 'len' },
  { name: 'lessThan', alias: 'lt' },
  { name: 'max', alias: 'lte' },
  { name: 'maxLength', alias: 'maxlen' },
  { name: 'maxLength', alias: 'xlen' },
  { name: 'min', alias: 'gte' },
  { name: 'minLength', alias: 'minlen' },
  { name: 'minLength', alias: 'nlen' }
];

Configurable message content

Default content from /content/en-us/default.js:

module.exports = {
  email: '%1 must be an email address',
  equals: '%1 must equal %2',
  greaterThan: '%1 must be greater than %2',
  integer: '%1 must be an integer',
  length: '%1 must have length equal to %2',
  lessThan: '%1 must be less than %2',
  max: '%1 must be at most %2',
  maxLength: '%1 must have a maximum length of %2',
  min: '%1 must be at least %2',
  minLength: '%1 must have a minimum length of %2',
  number: '%1 must be a number',
  numeric: '%1 must only contain numbers',
  required: '%1 is required',
  startsWith: '%1 must start with %2',
  url: '%1 must be a url'
};

To provide your own:

import { FormState } from 'react-formstate';
import * as rfsv from 'react-formstate-validation';
let validationAdapter = new rfsv.FormStateAdapter(
  rfsv.library,
  yourContent,
  rfsv.aliases
  );
validationAdapter.plugInto(FormState);

Note you can provide your own library and aliases. You can plug in validator if you want.

Expansion

react-formstate provides a variety of ways to express validation logic, including registering your own validation functions.

For minor additions and modifications it's easiest to start there.

(That being said, contributions to this library are welcome!)