How to validate decimal numbers in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn to validate decimal numbers in JavaScript.

A number containing decimal(.) is known as a decimal number. A number comes between the two whole numbers, called decimal numbers. We use decimal numbers in calculations, progress bars, to accept input in forms, etc.

A regular expression is a well-known entity for validation purposes. A Regular expression is a search pattern of characters with a specific meaning used to validate the data. It can be used for any string or number. We are going to use it for validation purposes in JavaScript.

We used a simple logic by using an if statement to validate the decimal number in JavaScript. We have used the indexOf() method in the if statement to validate the data. So, let us look at how to validate decimal numbers in JavaScript.

Following are the ways we have used to validate decimal numbers in JavaScript

Using the match() method
Using regular expression

Validate Decimal Number Using the match() Method

To validate decimal numbers in JavaScript, use the match() method. It retrieves the matches when matching a string against a regular expression.

Syntax

str.match( re );

Here str is the number in string form and re is the regular exression to validate the number in the string str.

Example

You can try to run the following code to validate decimal numbers.


<html>
<body>
   <script>
      var str = "1.5";
      var re = /^[-+]?[0-9]+\.[0-9]+$/;
      var found = str.match( re );
      document.write("decimal" );
  </script>
</body>
</html>

Validate Decimal Numbers Using Regular Expression

Regular expressions are the pattern of characters that validates the data. They are pairs of patterns and modifiers. Patterns contain the characters they want to search for or the range of characters and are enclosed inside the backslashes(/). The modifiers specify the searching behavior; it may be for ignoring match cases or multiline strings.

Syntax

We can follow the below syntax to use regular expressions to validate decimal numbers in JavaScript −

var decimal= <Decimal number here>;
var regex= /^[-+]?[0-9]+\.[0-9]+$/;
var isValidated=decimal.test(regex);

Parameters

[-+] − Find any of the characters inside the brackets.
[0-9] − denotes a range from 0 to 9.
^ − Match the expression from the beginning of a string. It matches any character.
? − Makes the other expressions optional.
$ − Matches the string from the end.
. − Find a single character.
test() − Matches a string with an expression and returns a boolean value.

Example

In the example, we have used the regular expression to check whether the number entered by the user is decimal or not.


<html>
<head>
   <style>
      #Number,
      #para {
         color: red;
      }
   </style>
</head>
<body>
   <h2>Using <i>regular expression</i> to validate decimal numbers</h2>
   <label for = "Number"> Decimal Number:</label>
   <input type = "number" id = "Number" value = "0.0"/>
   <button id = "btn">submit</button>
   <p id = "para"></p>
   <script>
      document.getElementById("btn").addEventListener("click", regularexp);
      function regularexp() {
         var value = document.getElementById("Number").value;
         var regex = /^[-+]?[0-9]+\.[0-9]+$/;
         var isValidated = regex.test(value);
         if (isValidated) {
            document.getElementById("para").innerHTML = "Given number is a decimal number";
         } else {
            document.getElementById("para").innerHTML = "Given number is not a decimal number";
         }
      }
   </script>
</body>
</html>

In the above example, users can see that we have used the regular expression to validate a decimal number in JavaScript.

Using an if-else statement to validate decimal numbers

There are conditional statements in JavaScript, like if or if-else statements. These statements contain a block of code to execute if the specified conditions become true; otherwise, the false statement will be executed.

We have used the indexOf() method to check whether the decimal is present in the number or not. If it is present, it should not be in the first place.

Users can follow the below syntax to use regular expressions to validate decimal numbers.

Syntax

var number = ;
var array=number.split('');
if(array.indexOf(".") >= 0){
   //The number is a decimal number
}
else{
   //The number is not a decimal number
}

You can follow the above syntax to validate the decimal number.

Example

In the example below, we have used the indexOf() method as a condition of an if statement. The following program checks whether the program with two decimal numbers or not. We have converted the number into an array of numbers and searched the decimal, which should be present in the number with an index of an array more than 0.


<html>
<head>
   <style>
      #Number,
      #para {
         color: green;
      }
   </style>
</head>
<body>
   <h2>Using <i>if statement</i> to validate decimal numbers</h2>
   <label for = "Number">Decimal Number:</label>
   <input type = "number" id = "Number" value = "0.0" />
   <button id = "btn">submit </button>
   <p id="para"></p>
   <script>
      document.getElementById("btn").addEventListener("click", regularexp);
      function regularexp() {
         var number = document.getElementById("Number").value;
         var array=number.split('');
         if(array.indexOf(".") >= 0){
            document.getElementById("para").innerHTML = "Decimal Number";
         }
         else{
            document.getElementById("para").innerHTML = "NOT Decimal Number";
         }
      }
   </script>
</body>
</html>

In the above example, users can see that we have checked the number and validated it. The number should have only two digits after the decimal.

In this tutorial, we have learned differernt ways to validate decimal numbers in JavaScript.

Shubham Vora

Updated on: 31-Oct-2022

11K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started