Simple react validation is a validator for react that has minimal configuration. Before you start the lesson install bootstrap to your project if you want the styling used here.

Let's see how it's done.

Step 1. Install simple react validator

npm install simple-react-validator --save

Step 2. Import simple react validator

import SimpleReactValidator from 'simple-react-validator';

Step 3. Declare simple react validator

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

Step 4. Add validation rules under inputs

{this.validator.message('password', this.state.password, 'required|email')}

Step 5. Check validation on input on submit

handleSubmit (e) {
   e.preventDefault();

   if (this.validator.allValid()) {
      alert('filled all fields!');
   } else {
      this.validator.showMessages();
     // rerender to show messages for the first time
     // you can use the autoForceUpdate option to do this automatically`
     this.forceUpdate();
   }
}

Here is how it looks in full:

import React, {Component} from "react";
import SimpleReactValidator from 'simple-react-validator';
import {MDBInput} from "mdbreact";

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userName:"",
            password:"",
        };
        this.handleSubmit = this.handleSubmit.bind(this);
        this.validator = new SimpleReactValidator();
    }

    handleSubmit (e) {
        e.preventDefault();

        if (this.validator.allValid()) {
            alert('filled all fields!');
        } else {
            this.validator.showMessages();
            // rerender to show messages for the first time
            // you can use the autoForceUpdate option to do this automatically`
            this.forceUpdate();
        }
    }

    render() {

        return (
            <div className="container">
                <div className="col-6 mx-auto">
                    <h3 className="mb-4">Login</h3>
                    <form onSubmit={this.handleSubmit}>
                        <div className="mb-3">
                            <label>Username</label>
                            <input type="text" className="form-control" onChange={e => this.setState({userName:e.target.value})}/>
                            <div className="text-danger">{this.validator.message('userName', this.state.userName, 'required')}</div>
                        </div>
                        <div className="mb-3">
                            <label>Password</label>
                            <input type="password" className="form-control" onChange={e => this.setState({password: e.target.value})}/>
                            <div className="text-danger">{this.validator.message('password', this.state.password, 'required|email')}</div>
                        </div>
                        <div>
                            <button type="submit" className="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        )
    }
}
export default Login;