Open In App

How to Restrict Input to Numbers and Decimals in JavaScript?

Last Updated : 12 Sep, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Restricting an input box to allow only numbers and decimal points involves setting up validation rules that ensure users can only enter numerical values and decimal separators. This helps maintain data integrity and prevents invalid entries in forms or user input fields.

Below are the approaches to restrict the input box to allow only numbers and decimal point JavaScript:

Table of Content

Approach 1: Using JavaScript

  • HTML Setup: An input field and paragraphs are included in the HTML to display validation status and instructions to the user.
  • Event Handling: The oninput event calls the valid function whenever the user types, triggering validation on each input change.
  • Regular Expression: A regular expression (/^\d*\.?\d*$/) validates numbers and optional decimal points, ensuring input conforms to the desired format.
  • Validation Function: The valid function tests input against the regex. If valid, it updates a status message; otherwise, it reverts invalid input.
  • Status Updates: The script updates text content in paragraphs to inform users whether their input is valid or invalid based on the regex check.

Example : This example uses the approach discussed above using JavaScript. 

html 
<!DOCTYPE HTML>
<html>

<head>
    <title>
        How to restrict input box to allow
        only numbers and decimal point JavaScript?
    </title>
</head>

<body style="text-align:center;" id="body">

    <h1 id="h1" style="color:green;">
        GeeksForGeeks
    </h1>
    <p id="GFG_UP" style="font-size: 15px; 
            font-weight: bold;">
    </p>
    <form>
        Type Here:
        <input id="input" oninput="valid(this)" 
               type="text">
    </form>
    <br>
    <p id="GFG_DOWN" style="font-size: 23px;
            font-weight: bold; 
            color: green; ">
    </p>
    <script>
        let el_up = document.getElementById("GFG_UP");
        let el_down = document.getElementById("GFG_DOWN");
        el_up.innerHTML =
"Type in the box to see whether the input is valid or not.";
        let RegExp = new RegExp(/^\d*\.?\d*$/);
        let val = document.getElementById("input").value;

        function valid(elem) {
            if (RegExp.test(elem.value)) {
                val = elem.value;
                el_down.innerHTML = "Typed Valid Character.";
            } else {
                elem.value = val;
                el_down.innerHTML = "Typed Invalid Character.";
            }
        }
    </script>
</body>

</html>

Output:

sdasfasfsdfsdfsdfsdfsdfsdffffffffffffffffffffff

Approach 2: Using JQuery

  • jQuery Initialization: The script runs within $(document).ready(), ensuring the DOM is fully loaded before executing the jQuery-based code.
  • Setting Initial Text: The initial message is set using $("#GFG_UP").text(), instructing users about the input validation functionality provided in the form.
  • Input Validation Function: The isValid() function uses key codes to check if the input is a number or a valid single decimal point.
  • Handling Decimal Points: It allows only one decimal point by verifying if a period (.) already exists in the current input value.
  • Updating Validation Status: The GFG_Fun() function updates the feedback message using jQuery's .text(), indicating whether the typed character is valid.

Example : This example using the approach discussed above using JQuery. 

html 
<!DOCTYPE HTML>
<html>

<head>
    <title>
        How to restrict input box to allow
        only numbers and decimal point JavaScript?
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body style="text-align:center;" id="body">
    <h1 id="h1" style="color:green;">
        GeeksForGeeks
    </h1>
    <p id="GFG_UP" style="font-size: 15px; 
            font-weight: bold;">
    </p>
    <form>
        Type Here:
        <input id="input" 
               onkeypress="return GFG_Fun(this, event)" 
               type="text">
    </form>
    <br>
    <p id="GFG_DOWN" style="font-size: 23px; 
            font-weight: bold; 
            color: green; ">
    </p>
    <script>
        $(document).ready(function () {
            // Setting initial text
            $("#GFG_UP").text(
              "Type in the box to see whether the input is valid or not.");

            // Function to validate input
            function isValid(el, event) {
                let charC = (event.which) ? event.which : event.keyCode;
                if (charC == 46) {
                    if ($(el).val().indexOf('.') === -1) {
                        return true;
                    } else {
                        return false;
                    }
                } else {
                    if (charC > 31 && (charC < 48 || charC > 57))
                        return false;
                }
                return true;
            }

            // Main function to handle keypress event
            window.GFG_Fun = function (t, event) {
                let isValidInput = isValid(t, event);
                if (isValidInput) {
                    $("#GFG_DOWN").text("Typed Valid Character.");
                } else {
                    $("#GFG_DOWN").text("Typed Invalid Character.");
                }
                return isValidInput;
            }
        });
    </script>
</body>

</html>

Output:

sdasfasfsdfsdfsdfsdfsdfsdffffffffffffffffffffff


P

PranchalKatiyar
Improve
Article Tags :

Explore

Lightbox