Reactjs

Reactjs Input Field Validation onchange Event

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:

validation-input-field-reactjs

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.

 

 

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

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