Cross-browser javascript onkeypress IsNumeric() method for Number Validation Asp.Net C# VB.Net

To make a Client-side numeric TextBox control using javascript is a common task in web development. Numeric checking may varied based on business logic. Like positive int, positive decimal, signed int or signed decimal. In my post I will try to focus on each requirements plus cross-browser compatibility. Here I will try to describe the script for 4 different methods for 4 business cases. Choose what you need.

4 cross-browser supported Client Side javascript IsNumeric() methods are as follows:
1. Javascript onKeypress Event to Check positve Integer Number
2. Javascript onKeypress Event to Check Signed Integer Number
3. Javascript onKeypress Event to Check Positve Decimal Number
4. Javascript onKeypress Event to Check Signed Decimal Number

Objective/Output:
Javascript_numeric_decimal_Floating_number_Validation

1. Javascript onKeypress Event to Check positve Integer Number:

    function bINT(sText) {
        if (isNaN(parseInt(sText)))
            return false;
    }

2. Javascript onKeypress Event to Check Signed Integer Number:

    function bSignedINT(sText, obj) {
        var CurPos = 0;
        if (document.selection) {
            obj.focus();
            var Sel = document.selection.createRange();
            Sel.moveStart('character', -obj.value.length);
            CurPos = Sel.text.length;
        }
        
        if(isNaN(parseInt(sText)) && !(CurPos == 0 && sText == '-'))
            return false;
    }

3. Javascript onKeypress Event to Check Positve Decimal Number:

    function bDecimal(sText, obj) 
    {
        if (isNaN(parseFloat(sText)) && !(sText == '.' && obj.value.indexOf('.') == -1))
            return false;
    }

4. Javascript onKeypress Event to Check Signed Decimal Number:

    function bSDecimal(sText, obj) {
        var CurPos = 0;
        if (document.selection) {
            obj.focus();
            var Sel = document.selection.createRange();
            Sel.moveStart('character', -obj.value.length);
            CurPos = Sel.text.length;
        }

        if (sText == '.' && obj.value.indexOf('.') == -1)
            return true;

        if (isNaN(parseFloat(sText)) && !(CurPos == 0 && sText == '-'))
            return false;
    }

Now Add Event handlers for Server Side C# VB.Net TextBox Controls:

<asp:Label runat="server" ID="lblPositiveInteger" Font-Bold="true">Positive Integer: </asp:Label>
<asp:TextBox onkeypress="return bINT(String.fromCharCode(event.keyCode));" id="txtINT" runat="server"></asp:TextBox>

<br />
<hr />

<asp:Label runat="server" ID="Label1"  Font-Bold="true">Signed Integer: </asp:Label>
<asp:TextBox runat="server" ID="txtSignedINT" onkeypress="return bSignedINT(String.fromCharCode(event.keyCode),this);"> </asp:TextBox>

<br />
<hr />

<asp:Label runat="server" ID="Label2" Font-Bold="true">Positive Decimal: </asp:Label>
<asp:TextBox runat="server" ID="txtDecimal" onkeypress="return bDecimal(String.fromCharCode(event.keyCode),this);"> </asp:TextBox>

<br />
<hr />

<asp:Label runat="server" ID="Label3" Font-Bold="true">Signed Decimal: </asp:Label>
<asp:TextBox runat="server" ID="txtSignedDecimal" onkeypress="return bSDecimal(String.fromCharCode(event.keyCode),this);"> </asp:TextBox>

Now Add Event handlers for HTML Input Text Controls:

<input type="Text" onkeypress="return bINT(String.fromCharCode(event.keyCode));">
<input type="Text" onkeypress="return bSignedINT(String.fromCharCode(event.keyCode),this);">
<input type="Text" onkeypress="return bDecimal(String.fromCharCode(event.keyCode),this);">
<input type="Text" onkeypress="return bSDecimal(String.fromCharCode(event.keyCode),this);">

If you observer the all IsNumeric methods you will found that, methods can handle minus(-) operator or minus sign, multiple or more than one dot or decimal in a number.

Script tested for:
1. Internet Explorer ( IE )
2. Mozilla Firefox
3. Opera
4. Google chrome

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Asp.net, C#, Client, Javascript, VB.Net

Leave a Reply

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

     

*