rule

Specification

A synchronous rule applied to the field as the top priority validation. When the rule rejects, all the remaining validation chain is ignored.

Definition

type Rule = RegExp | (params) => boolean

Parameters

The following parameters are exposed to the rule when it is a function:

Parameter name	Type	Description
get	Function	Reactive props getter function.
value	any	The current value of the field.
fieldProps	Object	Props of the current field.
fields	Object	Map of all fields.
form	Object	A reference to the current Form

Example

Regular expression

import React from 'react'
import { Form } from 'react-advanced-form'
import { Input } from 'react-advanced-form-addons'

export default class Example extends React.Component {
  render() {
    return (
      <Form>
        <Input
          name="username"
          rule={/^\d+/} />
      </Form>
    )
  }
}

Resolver function

import React from 'react'
import { Form } from 'react-advanced-form'
import { Input } from 'react-advanced-form-addons'

export default class Example extends React.Component {
  validateUsername = ({ get, value, fieldProps, fields, form }) => {
    /* "username" is valid only when equals to "foo" */
    return value === 'foo'
  }
  
  render() {
    return (
      <Form>
        <Input
          name="username"
          rule={this.validateUsername} />
      </Form>
    )
  }
}

Reactive rule

import React from 'react'
import { Form } from 'react-advanced-form'
import { Input } from 'react-advanced-form-addons'

export default class Example extends React.Component {
  render() {
    return (
      <Form>
        <Input
          name="password"
          type="password"
          required />
        <Input
          name="confirmPassword"
          rule={({ get, value }) => {
            /* Valid only when equals to "password" field's value */
            return value === get(['password', 'value'])
          }}
          required />
      </Form>
    )
  }
}

Read more about Reactive props feature, it is a game-changer.