ValidatedInput

A React Component which makes input validation really easy.

Install

npm install --save validated-input

Usage

All props are mapped to an input, so just treat the component like a regular input element.

You will need to tell the component how to validate the given value. To make this easy, we have proxied all the validation methods from the amazing validator module.

Here is a couple examples:

import React from 'react';
import ValidatedInput from 'validated-input';

export default function FormExample({ phone, updatePhone, email, updateEmail }) {
  return <div className="form">
    <ValidatedInput
      validate={v => v.isMobilePhone('en-US')}
      type="tel"
      placeholder="Phone Number"
      value={phone}
      onChange={e => updatePhone(e.target.value)}
    />
    <ValidatedInput
      validate={v => v.isEmail()}
      type="email"
      placeholder="Email Address"
      value={email}
      onChange={e => updateEmail(e.target.value)}
      required
    />
  </div>
};

Props for ValidatedInput

All other props are automatically mapped to the inner input element.

| Name | Type | Default | Description | | ------------ | ------- | ------- | ----------- | | validate | Function | validator => true | A function to validate the current value | | containerClassName | String | validation-container | class of input container div | | errorClassName | String | error | class for error |