Introduction

In this example I am going to show you how to allow only numeric values or digits in input field using React JS. You may have a requirement where you only need to allow user digits or numeric values for the input field. If user inputs non-numeric values then either you show an error or you do not allow non-numeric values at all.

Here I am going to show you how to show error when user type non-numeric values in the input field. In another example I am also going to show you how to prevent or allow only digits in input field.

Prerequisites

React JS, How to create new React project

Allow Digits or Numeric Values in Input Box

In this example I am going to check each input value on key up or key press event. The javascript function checks for charcode when a key is pressed in the keyboard and it check if it does not fall between 48 and 57 then it is other than digit. So we are going to show an error message.

Here in the source code we have only one input box and on onkeyup JavaScript event we implement the validation logic. We get the char code value for the key which is pressed and check the char code value between 48 and 57. Otherwise we are going to show an error message.

Change page title by editing the file public/index.html:

<title>React App - Allow only numeric values or digits in input field</title>

Using JavaScript’s on key up event (onkeyup) we are showing error message if non-numeric values are input. You can also use on key press (onkeypress) event.

Edit App.js file under src directory and change as below:

import React from 'react';

class NumericInputApp extends React.Component {
	constructor(props) {
		super(props);
		this.state = { error: '' };
		this.allowOnlyNumericsOrDigits = this.allowOnlyNumericsOrDigits.bind(this);
	}
	
	allowOnlyNumericsOrDigits(e) {		
		const charCode = e.which ? e.which : e.keyCode;
		
		if (charCode > 31 && (charCode < 48 || charCode > 57)) {
			this.setState({ error: 'OOPs! Only numeric values or digits allowed' });
		}
	}

	render() {
		return (
			<div>
				<span style={{color:'red'}}>{this.state.error}</span><br/>
				<label>Input Here</label>&nbsp;&nbsp;<input onKeyUp={this.allowOnlyNumericsOrDigits.bind(this)}/>
			</div>
		);
	}
}

export default NumericInputApp;

When you run the application by executing the command npm start and type non-numeric values then you will end up with something similar to the below error message:

Next example we will see how to allow users only input digits or numeric values. So if user enters any character then we will replace it.

The App.js file has the following code. We are using here key up (keyup) event. You can also use the key press (keypress) event.

import React from 'react';

class NumericInputApp extends React.Component {
	constructor(props) {
		super(props);
		this.allowOnlyNumericsOrDigits = this.allowOnlyNumericsOrDigits.bind(this);
	}
	
	allowOnlyNumericsOrDigits(e) {		
		if(/\D/g.test(e.target.value)) {
			e.target.value = e.target.value.replace(/\D/g,'');
		}
	}

	render() {
		return (
			<div>
				<label>Input Here</label>&nbsp;&nbsp;<input onKeyUp={this.allowOnlyNumericsOrDigits.bind(this)}/>
			</div>
		);
	}
}

export default NumericInputApp;

In this example you will see that non-numeric values get replaced.

The next example shows you the input type is number. You don’t need any code to be written on the TypeScript file. It has incrementer and decrementer controls which you can use to increase or decrease the value. In this input box you won’t be able to type any character value.

import React from 'react';

class NumericInputApp extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		return (
			<div>
				<label>Input Here</label>&nbsp;&nbsp;<input type="number"/>
			</div>
		);
	}
}

export default NumericInputApp;

Here is the output of the above code snippet:

That’s all. Hope you got an idea how to validate numeric values in input field.

Source Code

Download

Thanks for reading.