Add Form Validation In ReactJS

Introduction

 

In this article we will learn basic React form validations. Form validation is an important part of web application development. Forms are used in Web applications to save user inputs.Validation is used to check that the values in form input fields match to particular expectations.

 

Prerequisites

• We should have a basic knowledge of ReactJS
• Visual Studio Code IDE should be installed on your system

Create a ReactJS Project

npx create-reatc-app formvalidation

Now open the newly created project in Visual Studio Code and install Reactstrap and Bootstrap by using the following commands.<

npm install --save bootstrap
npm install --save reactstrap react react-dom

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

Now, go to the "src" folder and add a new component named 'EmployeeForm.js'

 

Now, open the EmployeForm.js file and add the following code:

import React from 'react';
import './App.css'
import { Button, Card, CardFooter, CardBody, CardGroup, Col, Container, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';

class EmployeeForm extends React.Component {
    constructor() {
      super();
      this.state = {
        entities: {},
        errors: {}
      }
      this.handleChange = this.handleChange.bind(this);
      this.EmployeeForm = this.EmployeeForm.bind(this);
    };

    handleChange(e) {
      let entities = this.state.entities;
      entities[e.target.name] = e.target.value;
      this.setState({
        entities
      });

    }

    EmployeeForm(e) {
      e.preventDefault();
      if (this.validateemployee()) {
          let entities = {};
          entities["EmployeeName"] = "";
          entities["Email"] = "";
          entities["City"] = "";
          entities["Password"] = "";
          entities["Department"] = "";
          this.setState({entities:entities});
          alert("Employee Details Save Successully");
      }
    }
    validateemployee() {
      let entities = this.state.entities;
      let errors = {};
      let IsValid = true;

      if (!entities["EmployeeName"]) {
        IsValid = false;
        errors["EmployeeName"] = "Employee name is Required";
      }

      if (!entities["Email"]) {
        IsValid = false;
        errors["Email"] = "Email is Required";
      }

      if (typeof entities["Email"] !== "#ff0000") {
        var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
        if (!pattern.test(entities["Email"])) {
          IsValid = false;
          errors["Email"] = "Email is not Valid";
        }
      }
      if (!entities["City"]) {
        IsValid = false;
        errors["City"] = "City is Required";
      }
      if (!entities["Department"]) {
        IsValid = false;
        errors["Department"] = "Department is Required";
      }
      if (!entities["Password"]) {
        IsValid = false;
        errors["Password"] = "Password is Required";
      }
      this.setState({
        errors: errors
      });
      return IsValid;
    }
  render() {
    return (
        <div className="app flex-row align-items-center">
        <Container>
          <Row className="justify-content-center">
            <Col md="9" lg="7" xl="6">
              <Card className="mx-4">
                <CardBody className="p-4">
                  <Form  method="post"  name="EmpForm"  onSubmit= {this.EmployeeForm}>
                    <div class="row" className="mb-2 pageheading">
                      <div class="col-sm-12 btn btn-primary">
                        Sign Up
                        </div>
                    </div>
                    <Input type="text" className="mrgn" name="EmployeeName" value={this.state.entities.EmployeeName} onChange={this.handleChange}  placeholder="Enter Email" />
                      <div className="errorMsg">{this.state.errors.EmployeeName}</div>
                      <Input type="text" className="mrgn" name="Email" value={this.state.entities.Email} onChange={this.handleChange}  placeholder="Enter Email" />
                      <div className="errorMsg">{this.state.errors.Email}</div>
                      <Input type="password"  className="mrgn" name="Password" value={this.state.entities.Password} onChange={this.handleChange} placeholder="Enter Password" />
                      <div className="errorMsg">{this.state.errors.Password}</div>
                      <Input type="text"  className="mrgn" name="City" value={this.state.entities.City} onChange={this.handleChange} placeholder="Enter City" />
                      <div className="errorMsg">{this.state.errors.City}</div>
                      <Input type="text"  className="mrgn" name="Department" value={this.state.entities.Department} onChange={this.handleChange} placeholder="Enter Department" />
                      <div className="errorMsg">{this.state.errors.Department}</div>
                     <Button type="submit" color="success" block  >Register</Button>
                  </Form>
                </CardBody>
              </Card>
            </Col>
          </Row>
        </Container>
      </div>
      );
  }
}
export default EmployeeForm;

Now open App.js file and add the following code:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import EmployeeForm from './Employeeform';

function App() {
  return (
    <div className="App">
     <EmployeeForm></EmployeeForm>
    </div>
  );
}

export default App;

 

Now run the project and check result, without entering any value in textboxes click on button, it's showing a validation message.

 

 

 

Now enter some values in textboxes and click on Register button 

 

 

It shows that the  email is not valid, so now enter a proper mail id and check

 

 

 

Summary

 

In this article, we learned about simple form validations in ReactJS Applications.