React Form Validation

Validation means to check that the data that is entered into the form is correct or not, react-js use bootstrap classes to implement validation practically.

Step by Step React JS Validation Process

1) Create Project

npm install -g create-react-app react-form-validation-demo

Now let’s run the app:

$ cd react-form-validation-demo/

$ npm start

That opens http://localhost:3000/ where our new app is running.

Step 2nd

INSTALL BOOTSTRAP LIBRARY IN PROJECT

Next, let’s add bootstrap so that we can style our form easily:

$ npm install react-bootstrap — save

$ npm install bootstrap@3 — save

Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of the src/index.js file:

import 'bootstrap/dist/css/bootstrap.css';

import 'bootstrap/dist/css/bootstrap-theme.css';

Ok, now let’s build the core of our demo app. Let’s add a Form component.

Step 3rd

Create a Form.js file and write the below code

import React, { Component } from 'react';

import { FormErrors } from './FormErrors';

import './Form.css';

class Form extends Component {

  constructor (props) {

    super(props);

    this.state = {

      email: '',

      password: '',

      formErrors: {email: '', password: ''},

      emailValid: false,

      passwordValid: false,

      formValid: false

    }

  }

  handleUserInput = (e) => {

    const name = e.target.name;

    const value = e.target.value;

    this.setState({[name]: value},

                  () => { this.validateField(name, value) });

  }

  validateField(fieldName, value) {

    let fieldValidationErrors = this.state.formErrors;

    let emailValid = this.state.emailValid;

    let passwordValid = this.state.passwordValid;

    switch(fieldName) {

      case 'email':

        emailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);

        fieldValidationErrors.email = emailValid ? '' : ' is invalid';

        break;

      case 'password':

        passwordValid = value.length >= 6;

        fieldValidationErrors.password = passwordValid ? '': ' is too short';

        break;

      default:

        break;

    }

    this.setState({formErrors: fieldValidationErrors,

                    emailValid: emailValid,

                    passwordValid: passwordValid

                  }, this.validateForm);

  }

  validateForm() {

    this.setState({formValid: this.state.emailValid && this.state.passwordValid});

  }

  errorClass(error) {

    return(error.length === 0 ? '' : 'has-error');

  }

  render () {

    return (

      <form className="demoForm">

        <h2>Sign up</h2>

        <div className="panel panel-default">

          <FormErrors formErrors={this.state.formErrors} />

        </div>

        <div className={`form-group ${this.errorClass(this.state.formErrors.email)}`}>

          <label htmlFor="email">Email address</label>

          <input type="email" required className="form-control" name="email"

            placeholder="Email"

            value={this.state.email}

            onChange={this.handleUserInput}  />

        </div>

        <div className={`form-group ${this.errorClass(this.state.formErrors.password)}`}>

          <label htmlFor="password">Password</label>

          <input type="password" className="form-control" name="password"

            placeholder="Password"

            value={this.state.password}

            onChange={this.handleUserInput}  />

        </div>

        <button type="submit" className="btn btn-primary" disabled={!this.state.formValid}>Sign up</button>

      </form>

    )

  }

}

export default Form;

Step 4th:-

create form.css file

.demoForm {

    width: 500px;

    margin: auto;

}

Step 5th:-

Create FomError.js file

import React from 'react';

export const FormErrors = ({formErrors}) =>

  <div className='formErrors'>

    {Object.keys(formErrors).map((fieldName, i) => {

      if(formErrors[fieldName].length > 0){

        return (

          <p key={i}>{fieldName} {formErrors[fieldName]}</p>

        )        

      } else {

        return '';

      }

    })}

  </div>

Step 6:- run project and show the ouput