Create numeric input with Min and Max validation in React

Posted on by Nathaniel Kirk
Create numeric input with Min and Max validation in React

In this article, you will learn how to create numeric input with Min and Max validation in React. Below are some methods, let’s check it out!

How to create numeric input with Min and Max validation in React?

This is a case you will encounter in practice when you need to create an input to enter numbers and validate that the return value must be in a specific number range. For example, the user can only enter values ​​from 1 to 100. It will not be accepted when the user returns values ​​less than 1 or greater than 100.

Using the min-max attribute method

This way, you will add attributes to the input tag, such as the tag type by number and the min and max values ​​for the tag. These are the default HTML attributes you need to add, which will look like below.

Code:

import React from "react";
import { useState } from "react";
 
const App = () => {
  const [numbericInput, setNumbericInput] = useState("");
  const handleChange=(e) => {
    setNumbericInput(e.target.value);
    console.log(numbericInput);
  }
  return (
    <>
      <h2>
        Create numeric input with Min and Max validation in React | LearnShareIT
      </h2>
      <hr/>
      <input
        value={numbericInput}
        onChange={handleChange}
        type="number"
        min="1"
        max="100"
      ></input>
    </>
  );
};
 
export default App;

Output:

When you reverse the value from 1 to 0, the tag will prevent this because the min of the input is already set to 1. It can also be considered a kind of numeric validation before we get the final value.

Using the conditional statement method

In this way, we will put the value of the input into a conditional statement with min and max values ​​to compare with the input value. We will put in a double condition if the value is less than min and more significant than the max, then it will return “invalid”. Otherwise, it will return the input value.

Code:

import React from "react";
import { useState } from "react";
 
const App = () => {
  const [numbericInput, setNumbericInput] = useState("");
  const [value,setValue]=useState("none");
  const handleChange=(e) => {
    setNumbericInput(e.target.value);
   
  }
  const handleClick=()=>{
    const min=1;
    const max=100;
    if(numbericInput<min||numbericInput>max){
      setValue("Invalid value")
    }else{
      setValue(numbericInput);
    }
  }
  return (
    <>
      <h2>
        Create numeric input with Min and Max validation in React | LearnShareIT
      </h2>
      <hr/>
      <input
        value={numbericInput}
        onChange={handleChange}
        type="number"
      ></input>
      <h3>{value}</h3>
      <button onClick={handleClick}>Show the input value</button>
    </>
  );
};
 
export default App;

Output:

This way, you will easily control the value of the input entered when it has passed the validation. Hope these methods are helpful to you

Summary

To sum up, this article has shown you how to create numeric input with Min and Max validation in React in two ways. However, I recommend you to use the conditional statement method because it will be easy to debug and customize.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *