GitHub

Simple React Validator

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

View on NPM »

Powered by Dockwa

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.

Working Example

Documentation

  1. Usage
  2. Setup
    1. Public Methods
    2. onBlur
    3. Conditional Fields
    4. React SFC's and Hooks
    5. React Native
  3. Rules
  4. Options
    1. Element
    2. Class Name
    3. Messages
    4. Validators
    5. Auto Force Update
    6. Localization
  5. Custom Validators

Usage

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

npm

npm install simple-react-validator --save

bower

bower install simple-react-validator --save

3 Easy Steps

  1. Import and Initialize the validator.
import SimpleReactValidator from 'simple-react-validator';

es5

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

es6

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')

Example:

"render() { return (

Write a Review

Title {/********** This is where the magic happens ***********/} {this.validator.message('title', this.state.title, 'required|alpha')}
Email {/********** This is where the magic happens ***********/} {this.validator.message('email', this.state.email, 'required|email', { className: 'text-danger' })}
Review

Read the original on github.com ↗