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