Saturday, April 20, 2024

Reactjs Input Field Validation onchange Event

Reactjs Input Field Validation onchange Event

Hello, welcome to 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{
    //declare custom data array of object
    this.state = {
    this.onInputChange = this.onInputChange.bind(this);
    this.validateField = this.validateField.bind(this);
    let name =;
    let value =;
      [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; = nameValid ? '': ' Username is too short';
    this.setState({formErrors: fieldValidationErrors,
      nameValid: nameValid,
      formValid: this.state.nameValid
    return (
        <InputGroupAddon addonType="prepend">
    <Input type="text" name="name" value={} onChange={this.onInputChange} value={} placeholder="Enter Username"/>
      <div style={{color:'red'}}>{}</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.



the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.