Skip to content
A simple react form validator inspired by Laravel validation.
Branch: master
Clone or download
dependabot-bot and stuyam Bump @babel/preset-env from 7.4.1 to 7.4.2
Bumps [@babel/preset-env]( from 7.4.1 to 7.4.2.
- [Release notes](
- [Changelog](
- [Commits](babel/babel@v7.4.1...v7.4.2)

Signed-off-by: dependabot[bot] <>
Latest commit 1e6c027 Mar 21, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
src 1.0.5 release Feb 11, 2019
.babelrc babel 6 to 7 and Oct 3, 2018
.gitignore First tryyyyyya May 7, 2017 docs for gh-pages Nov 14, 2018
License Update Feb 11, 2019

Simple React Validator

A simple react and react native form validator inspired by Laravel validation.

View on NPM »

Powered by Dockwa


Simple React Validator is exactly as it sounds. We wanted to build a validator for react that had minimal configuration and felt natural to use. It's configuration and usage is similar to the Laravel PHP framework and make validation as easy as one line.

Working Example


  1. Usage
  2. Setup
  3. Rules
  4. Options
  5. Custom Validators


Open the example/index.html file for more usage examples of the library or check out the Example


npm install simple-react-validator --save


bower install simple-react-validator --save

3 Easy Steps

  1. Initialize the validator.


componentWillMount: function() {
  this.validator = new SimpleReactValidator();


constructor() {
  this.validator = new SimpleReactValidator();
  1. Add validation rules under inputs. The message method accepts 5 arguments:
  • Field Name: A unique underscored string that gets replaced in the messaging as the name of the field.
  • Value: Usually the state of the current field.
  • Rules String: A pipe separated list of rules to apply to the string.
  • Options (Optional): Object of options same as the default options.
this.validator.message('title', this.state.title, 'required|email')


render() {
  return (
    <div className="container">
      <h1>Write a Review</h1>
      <div className="form-group">
        <input className="form-control" value={this.state.title} onChange={this.setTitle} />

        {/**********   This is where the magic happens     ***********/}
        {this.validator.message('title', this.state.title, 'required|alpha')}

      <div className="form-group">
        <input className="form-control" value={} onChange={this.setEmail} />

        {/**********   This is where the magic happens     ***********/}
        {this.validator.message('email',, 'required|email', 'text-danger')}

      <div className="form-group">
        <textarea className="form-control" value={} onChange={this.setReview} />

        {/**********   This is where the magic happens     ***********/}
        {this.validator.message('review',, 'required|min:20|max:120'})}

      <button className="btn btn-primary" onClick={this.submitForm}>Save Review</button>
  1. Check if the validation passes when submitting and turn on messaging if it fails. Once messaging is turned on, validation messages will change and update as the user types.
submitForm: function() {
  if (this.validator.allValid()) {
    alert('You submitted the form and stuff!');
  } else {
    // rerender to show messages for the first time

There is another method you can use to check if a single field is valid or not.

if (this.validator.fieldValid('email')) {
  // booya this field is valid!

React Native

You need to wrap validator with <Text> Element.

  {this.validator.message('title', this.state.title, 'required|alpha')}

Conditional Fields

A field is added to validator via the above message method. But sometimes you want to conditionally add and remove validation as the form is completed. For this you can use the purgeFields method to clear all validator before each render so only the fields added during that render are validated.

render() {
  return (
      <div className="form-group">
        <label>Address Line 1</label>
        <input className="form-control" value={this.state.title} onChange={this.setTitle} />
        {this.validator.message('title', this.state.title, 'required|alpha')}
      <button className="btn btn-primary" onClick={this.submitForm}>Save Review</button>


This is the list of all the rules you can validate form inputs against. When using multiple rules, separate them with a pipe |. When adding options, append a colon to the rule and separate options with commas. Examples: 'required|min:20|max:120' and 'required|in:stu,stuart,stuyam'. You can apply the rules via an array like ['require', {max: 20, min: 120}] or ['require', {in: ['stu', 'stuyam']}]. This is necessary for things like the regex validator where you may be using pipes or commas in the regex and would conflict with the rule string.


Must be a JavaScript true, good for required check boxes.


Must be after date. See Date for info on accepted date values.


Must be after or on date. See Date for info on accepted date values.


Must only container letters.


Must only container letters and spaces.


Must only container letters and numbers.


Must only container letters, numbers, and spaces.


Must only container letters, numbers, dashes, and underscores.


Must only container letters, numbers, dashes, underscores, and spaces.


Must be a JavaScript Array.


Must be before date. See Date for info on accepted date values.


Must be before or on date. See Date for info on accepted date values.


Must be between two values. See Size for info on how size is calculated and how options work.


Must be a JavaScript Boolean.


Must be a valid credit card expiration date. Ex. 10/18 or 10/2018


Must be a valid credit card number. Ex. 4242424242424242 or 4242 4242 4242 4242


Must be a valid currency. Dollar signs and commas are optional. Ex. 4.25, $3000 or $3,245,525.12


Must be a date type momentjs date. Requires Momentjs


Must be a date on a specific date.
Options: date must be a momentjs date object.


Must be a valid email format.


Must match a string in options.
Options: list of values it must match.


Must be an integer value.


Must not be greater than max. See Size for info on how size is calculated and how options work.


Must not be less than min. See Size for info on how size is calculated and how options work.


Must NOT match a string in options.
Options: list of values it must not match.


Must NOT match a regex.
Options: regex it must not match.
Note: if your regex uses a | or , or other special characters use the array syntax to define the rule.


Must be a number of any type.


Must be a valid phone number format. Ex. (508) 555-1234 or 5085551234


Must match a regex.
Options: regex it must match.
Note: if your regex uses a | or , or other special characters use the array syntax to define the rule.


Must be present, use with other validators to require them.


Must be of a particular size. Can be a string length, array length, or number.
Options: type is optional and defaults to string. There are 3 types 'string', 'num', and 'array'. String is length of string, num is size of number, array is length of array.


Must be of type string.


Must be of JavaScript type specified in the options.
Options: compare the type of the value given to the type provided. Use array syntax to define the type else it will always be type string.


Must be a valid url. Ex. or


The Simple React Validator can receive an options object when initialized or as the fourth parameter when defining a validator. There are 4 options you can provide.

  1. element: Accepts a block where you can return the default element that you want to wrap the message from a validator message. The default element is <div className="srv-validation-message">{message}</div>. If you are using React Native the default will be just the message the gets returned. You can also set element: false to just return a message.
  • Takes 2 params
  • message: The message coming from the validator.
  • className (optional): Will optionally be provided so you can change the className on a per validation basis.
this.validator = new SimpleReactValidator({
  element: message => <div>{message}</div>
  // OR
  element: (message, className) => <div className={className}>{message}</div>
  1. className: String of classes to be passed into an element, default is srv-validation-message and can be overriden.
  2. messages: Accepts an object to override validation messages. It also accepts a default which will override all messages.
this.validator = new SimpleReactValidator({
  messages: {
    email: 'That is not an email.'
    // OR
    default: 'Validation has failed!'  // will override all messages
  1. validators: Accepts an object of custom validators. See Custom Validators for more info on defining custom validators.

Custom Validators

You can write custom rules that you can use the validate. A rule has 4 options:

  1. message: The message the will be shown when the validation fails. :attribute will be replaced by the humanized name that your provide of the attribute you are validating (supports snake_case or camelCase).
  2. rule: Accepts a block that returns true if validator passes and false if it fails.
  • Takes 3 params
  • val: The value that is being validated.
  • params: An array containing the params passed into the validator.
  • validator: The validator object, allows you to access helper methods such as validator.helpers.textRegex(val, regex) which returns true or false if the regex passes.
  1. messageReplace (optional): Accepts a block uses to modify and return the message on the fly.
  • Takes 2 params
  • message: The message provided above.
  • params: An array containing the params passed into the validator.
  1. required (optional): True if you want the validator to be implicitly required when it is applied. All validators are not required by default. The equivalent of adding required to each validation definition.


constructor() {
  this.validator = new SimpleReactValidator({
    validators: {
      ip: {  // name the rule
        message: 'The :attribute must be a valid IP address and must be :values.',
        rule: (val, params, validator) => {
          return validator.helpers.testRegex(val,/^(?!0)(?!.*\.$)((1?\d?\d|25[0-5]|2[0-4]\d)(\.|$)){4}$/i) && params.indexOf(val) === -1
        messageReplace: (message, params) => message.replace(':values', this.helpers.toSentence(params)),  // optional
        required: true  // optional


render: function() {
  return (
    <div className="container">
      <h1>Give Me Your IP</h1>
      <div className="form-group">
        <label>IP Address</label>
        <input className="form-control" value={this.state.ip} onChange={this.setIP} />
        {this.validator.message('ipAddress', this.state.ip, 'required|ip:')}
You can’t perform that action at this time.