Components

Validations

Custom error messages

import React from 'react';
import { AvForm, AvField } from 'availity-reactstrap-validation';
import { Button } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    return (
      <AvForm>
        <AvField name="name" label="Name (default error message)" type="text" errorMessage="Invalid name" validate={{
            required: {value: true},
            pattern: {value: '^[A-Za-z0-9]+$'},
            minLength: {value: 6},
            maxLength: {value: 16}
          }} />
        <AvField name="nameCustomMessage" label="Name (custom error message)" type="text" validate={{
            required: {value: true, errorMessage: 'Please enter a name'},
            pattern: {value: '^[A-Za-z0-9]+$', errorMessage: 'Your name must be composed only with letter and numbers'},
            minLength: {value: 6, errorMessage: 'Your name must be between 6 and 16 characters'},
            maxLength: {value: 16, errorMessage: 'Your name must be between 6 and 16 characters'}
          }} />
        <Button color="primary">Submit</Button>
      </AvForm>
    );
  }
}

Date

import React from 'react';
import { AvForm, AvField } from 'availity-reactstrap-validation';
import { Button } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    return (
      <AvForm>
        <AvField name="date" label="Date" type="date" />
        <AvField name="dateProp" label="Date (validate prop)" type="text" validate={{date: {format: 'MM/DD/YYYY'}}} title="Use MM/DD/YYYY" />
        <Button color="primary">Submit</Button>
      </AvForm>
    );
  }
}

DateRange

import React from 'react';
import { AvForm, AvField } from 'availity-reactstrap-validation';
import { Button } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    return (
      <AvForm>
        <AvField name="dateRange" label="Date (with relative dates)" type="date" validate={{dateRange: {start: {value: -5, units: 'years',} ,end: {value: 5, units: 'years',}}}} />
        <AvField name="dateRangeProp" label="Date (with absolute dates)" type="text" validate={{dateRange: {format: 'MM/DD/YYYY', start: {value: '01/01/2010'}, end: {value: '12/31/2020'}}}} title="Use MM/DD/YYYY" />
        <Button color="primary">Submit</Button>
      </AvForm>
    );
  }
}

DateTime

import React from 'react';
import { AvForm, AvField } from 'availity-reactstrap-validation';
import { Button } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    return (
      <AvForm>
        <AvField name="datetime" label="DateTime" type="datetime" />
        <AvField name="datetimeProp" label="DateTime (validate prop)" type="text" validate={{datetime: true}} />
        <Button color="primary">Submit</Button>
      </AvForm>
    );
  }
}

Email

import React from 'react';
import { AvForm, AvField } from 'availity-reactstrap-validation';
import { Button } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    return (
      <AvForm>
        <AvField name="email" label="Email" type="email" />
        <AvField name="emailProp" label="Email (validate prop)" type="text" validate={{email: true}} />
        <Button color="primary">Submit</Button>
      </AvForm>
    );
  }
}

Match

import React from 'react';
import { AvForm, AvField } from 'availity-reactstrap-validation';
import { Button } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    return (
      <AvForm>
        <AvField name="originalEmail" label="Email" type="email" />
        <AvField name="confirmationEmail" label="Email" type="email" validate={{match:{value:'originalEmail'}}} />
        <Button color="primary">Submit</Button>
      </AvForm>
    );
  }
}

Max

import React from 'react';
import { AvForm, AvField } from 'availity-reactstrap-validation';
import { Button } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    return (
      <AvForm>
        <AvField name="maxPropString" label="Max" type="number" max="10" />
        <AvField name="maxPropNumber" label="Max (w/ prop as a number)" type="number" max={10} />
        <AvField name="maxPropNumberProp" label="Max (validate prop)" type="text" validate={{max: {value: 10}}} />
        <Button color="primary">Submit</Button>
      </AvForm>
    );
  }
}

MaxLength

import React from 'react';
import { AvForm, AvField } from 'availity-reactstrap-validation';
import { Button } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    return (
      <AvForm>
        <AvField name="maxLengthPropString" label="Max Length" type="text" maxLength="10" />
        <AvField name="maxLengthPropNumber" label="Max Length (w/ prop as a number)" type="text" maxLength={10} />
        <AvField name="maxLengthPropNumberProp" label="Max Length (validate prop)" type="text" validate={{maxLength: {value: 10}}} />
        <Button color="primary">Submit</Button>
      </AvForm>
    );
  }
}

MaxChecked

Select No More Than Two Checkboxes
import React from 'react';
import { AvForm, AvCheckbox, AvCheckboxGroup } from 'availity-reactstrap-validation';
import { Button } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    return (
      <AvForm>
        <AvCheckboxGroup inline name="maxCheckedCheckboxList" label="Select No More Than Two Checkboxes" validate={{max: {value: 2}}}>
          <AvCheckbox label="Bulbasaur" value="Bulbasaur" />
          <AvCheckbox label="Squirtle" value="Squirtle" />
          <AvCheckbox label="Charmander" value="Charmander" />
          <AvCheckbox label="Pikachu" value="Pikachu" disabled />
        </AvCheckboxGroup>

        <Button color="primary">Submit</Button>
      </AvForm>
    );
  }
}

Min

import React from 'react';
import { AvForm, AvField } from 'availity-reactstrap-validation';
import { Button } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    return (
      <AvForm>
        <AvField name="minPropString" label="Min" type="number" min="10" />
        <AvField name="minPropNumber" label="Min (w/ prop as a number)" type="number" min={10} />
        <AvField name="minPropNumberProp" label="Min (validate prop)" type="text" validate={{min: {value: 10}}} />
        <Button color="primary">Submit</Button>
      </AvForm>
    );
  }
}

MinLength

import React from 'react';
import { AvForm, AvField } from 'availity-reactstrap-validation';
import { Button } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    return (
      <AvForm>
        <AvField name="minLengthPropString" label="Min Length" type="text" minLength="10" />
        <AvField name="minLengthPropNumber" label="Min Length (w/ prop as a number)" type="text" minLength={10} />
        <AvField name="minLengthPropNumberProp" label="Min Length (validate prop)" type="text" validate={{minLength: {value: 10}}} />
        <Button color="primary">Submit</Button>
      </AvForm>
    );
  }
}

MinChecked

Select At Least Two Checkboxes
import React from 'react';
import { AvForm, AvCheckbox, AvCheckboxGroup } from 'availity-reactstrap-validation';
import { Button } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    return (
      <AvForm>
        <AvCheckboxGroup inline name="minCheckedCheckboxList" label="Select At Least Two Checkboxes" validate={{min: {value: 2}}}>
          <AvCheckbox label="Bulbasaur" value="Bulbasaur" />
          <AvCheckbox label="Squirtle" value="Squirtle" />
          <AvCheckbox label="Charmander" value="Charmander" />
          <AvCheckbox label="Pikachu" value="Pikachu" disabled />
        </AvCheckboxGroup>

        <Button color="primary">Submit</Button>
      </AvForm>
    );
  }
}

Npi

import React from 'react';
import { AvForm, AvField } from 'availity-reactstrap-validation';
import { Button } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    return (
      <AvForm>
        <AvField name="npi" label="NPI" type="text" validate={{npi: true}} />
        <Button color="primary">Submit</Button>
      </AvForm>
    );
  }
}

Number

import React from 'react';
import { AvForm, AvField } from 'availity-reactstrap-validation';
import { Button } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    return (
      <AvForm>
        <AvField name="number" label="Number" type="number" />
        <AvField name="numberProp" label="Number (validate prop)" type="text" validate={{number: true}} />
        <Button color="primary">Submit</Button>
      </AvForm>
    );
  }
}

Pattern

import React from 'react';
import { AvForm, AvField } from 'availity-reactstrap-validation';
import { Button } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    return (
      <AvForm>
        <AvField name="pattern" label="Pattern" type="text" pattern="^[A-Z]*$" placeholder="^[A-Z]*$" title="Only Uppercase letters are allowed for this example" />
        <AvField name="patternPropRegex" label="Pattern (validate prop with regex)" type="text" validate={{pattern: {value: /^[A-Z]*$/}}} placeholder="^[A-Z]*$" title="Only Uppercase letters are allowed for this example" />
        <AvField name="patternPropString" label="Pattern (validate prop with string)" type="text" validate={{pattern: {value: '^[A-Z]*$'}}} placeholder="^[A-Z]*$" title="Only Uppercase letters are allowed for this example" />
        <Button color="primary">Submit</Button>
      </AvForm>
    );
  }
}

Phone

Note: Validates against NANP

import React from 'react';
import { AvForm, AvField } from 'availity-reactstrap-validation';
import { Button } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    return (
      <AvForm>
        <AvField name="telephone" label="Phone" type="tel" />
        <AvField name="telephoneProp" label="Phone (validate prop)" type="text" validate={{tel: true}} />
        <Button color="primary">Submit</Button>
      </AvForm>
    );
  }
}

Required

import React from 'react';
import { AvForm, AvField } from 'availity-reactstrap-validation';
import { Button } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    return (
      <AvForm>
        <AvField name="required" label="Required" type="text" required />
        <AvField name="requiredProp" label="Required (validate prop)" type="text" validate={{required: true}} />
        <Button color="primary">Submit</Button>
      </AvForm>
    );
  }
}

Step

Note: Only works only with input type of numbers

import React from 'react';
import { AvForm, AvField } from 'availity-reactstrap-validation';
import { Button } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    return (
      <AvForm>
        <AvField name="step5" label="Step" type="number" step="5" />
        <AvField name="step5Prop" label="Step (validate prop)" type="number" validate={{step: {value: 5}}} />
        <Button color="primary">Submit</Button>
      </AvForm>
    );
  }
}

Custom / Async

import React from 'react';
import { AvForm, AvField } from 'availity-reactstrap-validation';
import _debounce from 'lodash.debounce';
import { Button } from 'reactstrap';

export default class Example extends React.Component {
  constructor (props) {
    super(props);

    this.state = {
      valid: 'true'
    }
  }

  // debounce to not pound the 'server'
  validate = _debounce((value, ctx, input, cb) => {

    // cancel pending 'network call'
    clearTimeout(this.timeout);

    // simulate network call
    this.timeout = setTimeout(() => {
      cb(value === 'valid' || value === '');
    }, 500);

  }, 300);

  render() {
    return (
      <AvForm onSubmit={console.log.bind(console)}>
        <AvField name="async" label="Async Validation (enter 'valid')" type="text" validate={{async: this.validate}} />
        <Button color="primary">Submit</Button>
      </AvForm>
    );
  }
}