Reactjs Input Field Validation onchange Event

Hello, welcome to therichpost.com. In this post, I will tell you, Reactjs Input Field Validation onchange Event. Reactjs is a Javascript Library to build user interface. Now I am also learning Reactjs these day because of my passion to learn new things. If you have good knowledge of javascript and then reactjs will easy to learn.

First, I will tell you, for working with input fields and html elements, we need reactstrap package and this will work as bootstrap.

Here is the working example image:

In this post, we are doing validation on input text field for minimum 6 characters and this validation will work on onchange event.

Here is the working and tested example and you can add this code into your index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import {Container, Row, Col, CardGroup, Card, CardBlock, Button, Input, InputGroup, InputGroupAddon} from "reactstrap";

class Hello extends React.Component{
  constructor()
  {
    super();
    //declare custom data array of object
    this.state = {
      "formErrors":{}
    }
    this.onInputChange = this.onInputChange.bind(this);
    this.validateField = this.validateField.bind(this);
    }
  
  
  onInputChange(event){
    let name = event.target.name;
    let value = event.target.value;
    this.setState({
      [name]: value}, 
      () => {this.validateField(name, value)});
  }
  
  validateField(fieldName, value) {
    let fieldValidationErrors = this.state.formErrors;
    let nameValid = this.state.nameValid;
    switch(fieldName) {
      case 'name':
        nameValid = value.length >= 6;
        fieldValidationErrors.name = nameValid ? '': ' Username is too short';
        break;
      default:
        break;
    }
    this.setState({formErrors: fieldValidationErrors,
      nameValid: nameValid,
      formValid: this.state.nameValid
    });
  }
    
  render()
  {
    return (
    <div>
      <InputGroup>
        <InputGroupAddon addonType="prepend">
    <Input type="text" name="name" value={this.state.name} onChange={this.onInputChange} value={this.state.name} placeholder="Enter Username"/>
      <div style={{color:'red'}}>{this.state.formErrors.name}</div>
        </InputGroupAddon>
        
      </InputGroup>
    </div>
      
    )
  }
}

ReactDOM.render(<Hello />, document.getElementById('root'));

 If you have any query related to this reactjs post and please do comment below. I will come with more posts related to reactjs.