JQuery text box count validation with text count display

In this example i have shown JQuery validation for text box with character count.In this example i have taken 10 characters count. Below screen shot is showing "1Characters Left". After u enter more than 10 characters, text box don't allow 11th character. This will give an error with "Only 10 characters allowed." message.

JQuery text box count validation with text count display
JQuery text box count validation with text count display


<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $("#txtUserName").keyup(function () {
                var userName = $("#txtUserName").val();

                if (userName.length >= 10) {
                    $("#validation").html("Only 10 characters allowed.");

                    userName = userName.substring(0, 10);
                    $("#txtUserName").val(userName);
                }
                else {
                    var userNameLength = userName.length;
                    var charactersLeft = parseInt(10) - parseInt(userNameLength);
                    $("#validation").html(charactersLeft + " Characters Left");
                }
            });
        });
    </script>
</head>
<body>
    <input type="text" id="txtUserName" />
    <div id="validation">
    </div>
    <input type="button" id="btnSubmit" value="submit" />
</body>
</html>
For more interview Questions, please see JQuery interview Questions.
Share this post :

Post a Comment

Please give your valuable feedback on this post. You can submit any ASP.NET article here. We will post that article in this website by your name.

 
Support : Ranga Rajesh Kumar
Copyright © 2012. ASP.NET Examples - All Rights Reserved
Site Designed by Ranga Rajesh Kumar