React-formstate-validation NPM

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.