Thursday, 4 December 2014

Numeric Validation: How to allow numbers, backspace, delete, left and right arrow and Tab Keys to the TextBox using Javascript or JQuery in ASP.NET

Hi friends,in this article I will explain about How to allow numbers, backspace, delete, left and right arrow and Tab Keys to the TextBox using Javascript or JQuery in ASP.NET
I already explained previous articles about Handling multiple submit buttons on the same View in MVC , WebGrid with inline editing, updating, cancel and delete the record using JSON AJAX in MVC and How to bind the Checkboxlist from the database
For more details on various Keyboard key and ASCII code please visit Keyboard Keys and Key Code Values

ASP.NET:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Numeric Validation:How to allow numbers, backspace, delete, left and right arrow
        and Tab keys to the TextBox using Javascript or JQuery in ASP.NET</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">
        //using Javascript
        function checkJS(event) {
            var key = window.event ? event.keyCode : event.which;
            if (event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 46 ||    event.keyCode == 37 || event.keyCode == 39) {
                document.getElementById("<%=lblError.ClientID %>").innerHTML = "";
                return true;
            }
            else if (key < 48 || key > 57) {
                document.getElementById("<%=lblError.ClientID %>").innerHTML = "Please enter 0-9 digits only";
                return false;
            }
            else {
                document.getElementById("<%=lblError.ClientID %>").innerHTML = "";
                return true;
            }
        }
        //using JQuery
        var specialKeys = new Array();
        specialKeys.push(8); //Backspace
        specialKeys.push(9); //Tab
        specialKeys.push(37); //Left Arrow
        specialKeys.push(39); //Right Arrow
        $(function () {
            $("#txtJQuery").bind("keypress", function (event) {
                var key = window.event ? event.keyCode : event.which;
                var keyCode = event.which ? event.which : event.keyCode;
                if (specialKeys.indexOf(keyCode) != -1 || event.keyCode == 46) {
                    $("#lblShowError").text("") ;
                    return true;
                }
                else if (key < 48 || key > 57) {
                    $("#lblShowError").text("Please enter 0-9 digits only");
                    return false;
                }
                else {
                    $("#lblShowError").text("");
                    return true;
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    Validation using Javascript
                </td>
                <td>
                    :
                </td>
                <td>
                    <asp:TextBox ID="txtJavascript" runat="server" onKeyPress="return checkJS(event)"></asp:TextBox>
                    <asp:Label ID="lblError" runat="server" ForeColor="Red"></asp:Label>
                </td>
            </tr>
            <tr>
                <td>
                    Validation using JQuery
                </td>
                <td>
                    :
                </td>
                <td>
                    <asp:TextBox ID="txtJQuery" runat="server"></asp:TextBox>
                    <asp:Label ID="lblShowError" runat="server" ForeColor="Red"></asp:Label>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

 The output of the above code as shown in the below figure.When you enter except numbers, backspace, delete, left and right arrow and Tab Keys then it shows "Please enter 0-9 digits only and not accepting the any other keys except numbers, backspace, delete, left and right arrow and Tab Keys.


You can download the code by clicking on the below Download button.

No comments:

Post a Comment

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.