Simple React Validator

A simple react form validator inspired by Laravel validation.

About

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.

Usage

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

npm

npm install simple-react-validator --save

bower

bower install simple-react-validator --save

3 Easy Steps

1. Initialize the validator.

es5

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

es6

constructor() {
  this.validator = new SimpleReactValidator();
}

2. 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.
• Optional Class Name: The class applied to the div that wraps the message, default is 'validation-message'.
• Optional Custom Error Messages: Will override the normal error messages.

render: function() {
  return (
    <div className="container">
      <h1>Write a Review</h1>
      <div className="form-group">
        <label>Title</label>
        <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>
      <div className="form-group">
        <label>Email</label>
        <input className="form-control" value={this.state.email} onChange={this.setEmail} />

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

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

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

      </div>
      <button className="btn btn-primary" onClick={this.submitForm}>Save Review</button>
    </div>
  );
},

3. 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 {
    this.validator.showMessages();
    // rerender to show messages for the first time
    this.forceUpdate();
  }
},

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!
}

Rules

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'

Custom Rules

You can write custom rules that you can use the validate. A rule is comprised of 3 parts; the name, the message, and the rule itself. Here is an example of adding a custom rule on initialize of the validator.

Example:

constructor() {
  this.validator = new SimpleReactValidator({
    ip: { // name the rule
      message: 'The :attribute must be a valid IP address.', // give a message that will display when there is an error. :attribute will be replaced by the name you supply in calling it.
      rule: function(val, options){ // return true if it is succeeds and false it if fails validation. the _testRegex method is available to give back a true/false for the regex and given value
        // check that it is a valid IP address and is not blacklisted
        return this._testRegex(val,/^(?!0)(?!.*\.$)((1?\d?\d|25[0-5]|2[0-4]\d)(\.|$)){4}$/i) && options.indexOf(val) === -1
      }
    }
  });
}

Usage:

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 is where the magic happens     */}
        {this.validator.message('ip_address', this.state.ip, 'required|ip:127.0.0.1')}
      </div>
      ...
    </div>
  );
},

Custom Error Messages

The fifth parameter is an object. The keys correspond to the rule names. If you use the key 'default' then that will be used for all errors that do not have custom errors set.

<div className="form-group">
  <label>Amount</label>
  <textarea className="form-control" value={this.state.amount} onChange={this.setAmount} />
  {this.validator.message(
    'amount',
    this.state.amount,
    'required|min:20|max:120',
    false,
    {min: 'Custom min error', default: 'Invalid.'}
  )}
</div>