Enter Only Numbers and Decimal Values Using jQuery

In one of my previous article, I have shared an example that explained how we can restrict numeric values, along with decimal values, inside Input boxes using JavaScript. Now here, I'll show you to how force users to enter only numbers and decimal values using jQuery.

The article here has two examples and both the examples use jQuery Selectors to impose restriction on a group of input textboxes.

The first example uses jQuery .class Selector and the second example using jQuery .id Selector. It’s a very simple example.

Using the “.class” Selector

Add the Google CDN for jQuery inside the <head> section of your Web page.

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

Here's the Markup with the Script

<!DOCTYPE html>
<html>
<head>
    <title>Enter only number using jQuery .class Selector</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    
    <style>
        .groupOfTexbox {
            color:#000; 
            font:11px/1.5 Arial, tahoma; 
            padding:2px 4px; 
            border:solid 1px #BFBFBF; 
            border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <label style="font-style:italic;">Input boxes, which accepts only 
                <strong>number</strong> and <strong>decimal</strong> values.</label>
        </p>

        <div>
            <h3>Group of Input boxes</h3>
            <input type="text" class="groupOfTexbox" /><br />
            <input type="text" class="groupOfTexbox" />
        </div>
            
        <p><label style="font-style:italic;">Input box, which accepts 
            <strong>Alphanumeric</strong> values.</label></p>
        <p><input type="text" style="text-transform:uppercase;" /></p>
    </div>
</body>

<script>
    // jQuery ".Class" SELECTOR.
    $(document).ready(function() {
        $('.groupOfTexbox').keypress(function (event) {
            return isNumber(event, this)
        });
    });
    // THE SCRIPT THAT CHECKS IF THE KEY PRESSED IS A NUMERIC OR DECIMAL VALUE.
    function isNumber(evt, element) {

        var charCode = (evt.which) ? evt.which : event.keyCode

        if (
            (charCode != 45 || $(element).val().indexOf('-') != -1) &&      // “-” CHECK MINUS, AND ONLY ONE.
            (charCode != 46 || $(element).val().indexOf('.') != -1) &&      // “.” CHECK DOT, AND ONLY ONE.
            (charCode < 48 || charCode > 57))
            return false;

        return true;
    }    
</script>
</html>

Try it

Try this demo

Input boxes, which accepts only number and decimal values.

Group of Input boxes

Input box, which accepts Alphanumeric values.

Browser Support:
Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 10 - Yes | Safari - Yes

Using the "#id" Selector

To restrict individual input boxes, we will use the jQuery “#id” Selector. This selector uses the ID of each input box or text box control.

<!DOCTYPE html>
<html>
<head>
    <title>Enter only number using jQuery .id Selector</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

<body>
    <p>jQuery .id Selector example. Enter only numbers and decimal values in the textbox!</p>

    <div>
       <asp:TextBox ID="tb1" Text="" Width="100px" runat="server"></asp:TextBox>
       <input type="text" id="tb2" />
    </div>
</body>

<script>
    $(document).ready(function() {

        // MULTIPLE "ID's" ARE SEPARATED BY COMMAS.
        $("#tb1, #tb2").keypress(function(event){ 
            return isNumber(event, this);
        });
    });

    // THE SCRIPT THAT CHECKS IF THE KEY PRESSED IS A NUMERIC OR DECIMAL VALUE.
    function isNumber(evt, element) {

        var charCode = (evt.which) ? evt.which : event.keyCode

        if (
            (charCode != 45 || $(element).val().indexOf('-') != -1) &&      // “-” CHECK MINUS, AND ONLY ONE.
            (charCode != 46 || $(element).val().indexOf('.') != -1) &&      // “.” CHECK DOT, AND ONLY ONE.
            (charCode < 48 || charCode > 57))
            return false;

        return true;
    }
</script>

Try it

The validation script or the function is the same for both the examples. However, in this examle, the funciton is called upon individual keypress() event of each input box.

← PreviousNext →