Java, .NET, PHP, PYTHON, ANGULAR, ML, Data Science, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

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



Post a Comment

POST Answer of Questions and ASK to Doubt

Previous Post Next Post