How to validate Octal number in ReactJS?

There are various types of number representation available such as decimal, hexadecimal, binary, octal, etc. The octal number is a number value by taking the base-8, and it accepts only numbers between 0 to 8.

Here, we will learn to validate the octal number. We need to check that all characters of the octal number string should be numeric and between 1 to 8.

Use the regular expression to validate octal number in ReactJS

The best approach to validate the octal number is using the regular expression. We can use the test() method with the regular expression to ensure that the number string is a valid octal number.

Syntax

Users can follow the syntax below to use the regular expression to validate the octal number in ReactJS.

let octalRegex = /^(0o)?[0-7]+$/i;
let isValid = octalRegex.test(octal) 

In the above syntax, we have passed the octal number as a parameter of the test() method to validate it.

Regular Expression Explained

• ^(0o)? − The octal number may contain (0o) in the start, representing that string is an octal number.

• [0-7]+ − The octal number can contain one or more digits between 0 to 7.

• $ − It represents the end of the string.

• i − It is used for the case-insensitive match for ‘o’.

Example

In the example below, We use the HTML input of the ‘number’ type to take the input for the octal number. We execute the handleNumberChange() function whenever the user enters the octal number's new value.

In the handleNumberChange() function, we have used the above regular expression with the test() method to validate the octal number. In the output, users can enter any number with digits 8 or 9 and observe that output showing that the octal number is invalid.

import React, { useState } from "react";
function App() {
   let [number, setNumber] = useState("");
   let [message, setMessage] = useState("");
   function handleNumberChange(event) {
      let currentNumber = event.target.value;
      setNumber(currentNumber);
      let octalRegex = /^(0o)?[0-7]+$/i;
      if (octalRegex.test(currentNumber)) {
         setMessage("is Valid Octal Number");
      } else {
         setMessage("is Invalid Octal Number");
      }
   }
   return (
      <div>
         <h3>
            {" "}
            Using the <i> Regular expression </i> to validate octal number in ReactJS{" "}
         </h3>
         <input type = "number" value = {number} onChange = {handleNumberChange} />
         <p> 
            {" "}
            {number} {message}
         </p>
      </div>
   );
}
export default App;

Output

When you enter a valid octal number -

When you enter an invalid octal number -

Use the validator NPM package to validate octal number in ReactJS

Here, we will use the isOctal() method of the validator library to validate the octal number.

Syntax

Users can follow the syntax below to use the isOctal() method of the validator NPM package to validate the octal number string.

validator.isOctal(num) 

Parameters

• num – It is an octal number string to validate.

Example

In the example below, whenever users change the octal number's value, we invoke the handleNumberChange() function, which uses the isOctal() method to validate the octal number. The function shows whether the message is valid or not based on whether the octal number is valid.

import React, { useState } from "react";
import validator from "validator";
function App() {
   let [number, setNumber] = useState("");
   let [message, setMessage] = useState("");
   function handleNumberChange(event) {
      let currentNumber = event.target.value;
      setNumber(currentNumber);
      if (validator.isOctal(currentNumber)) {
         setMessage("is Valid Octal Number");
      } else {
         setMessage("is Invalid Octal Number");
      }
   }
   return (
      <div>
         <h3>
            {" "} 
            Using the <i> Validator NPM package </i> to validate octal numbers in ReactJS{" "}
         </h3>
         <input type = "text" value = {number} onChange = {handleNumberChange} />
         <p>
            {" "}
            {number} {message}
         </p>
      </div>
   );
}
export default App; 

Output

Use the custom algorithm to validate octal numbers in ReactJS

We can check every digit of the number, and if we find any digit greater than 7, we can say that number is not a valid octal number.

Syntax

Users can follow the syntax below to validate the octal number using the custom algorithm.

for (let i = 0; i < currentNumber.length; i++) {
   if (currentNumber[i] > 7) {
      } else { 
   }
}

In the above syntax, we have used the for loop to check every number digit. In the for loop, we have used the if statement to ensure that the number is a valid octal number

Example

In the example below, we check if any digit is greater than seven inside the handleNumberChange() function. If yes, we set a message like ‘is not a valid octal number.’ Otherwise, we set a message like ‘is a valid octal number’.

import React, { useState } from "react";
function App() {
   let [number, setNumber] = useState("");
   let [message, setMessage] = useState("");
   function handleNumberChange(event) {
      let currentNumber = event.target.value;
      setNumber(currentNumber);
      
      // custom code to validate the octal number
      for (let i = 0; i < currentNumber.length; i++) {
         if (currentNumber[i] > 7) {
            setMessage(" is not a valid octal number");
            return;
         } else {
            setMessage(" is a valid octal number");
         }
      }
   }
   return (
      <div>
         <h3>
            {" "}
            Using the <i> custom algorithm </i> to validate octal number in ReactJS.{" "}
         </h3>
         <input type = "number" value = {number} onChange = {handleNumberChange} />
         <p>
            {" "}
            {number} {message}
         </p>
      </div>
   );
}
export default App;

Output

Users learned to validate the octal number using various approaches in this tutorial. We used the regular expression in the first approach validator NPM package in the second approach. Furthermore, we have created the custom algorithm in the third approach to validate the octal number.