Avoid special characters and space to enter in textbox using Jquery - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

Avoid special characters and space to enter in textbox using Jquery

In this article I am going to explain how to avoid special characters and space to enter (type) in textbox using Jquery

Description:
In application I am validating username. I want to avoid entering space and special characters in username. I am going to do this using jquery.

Implementation:
We have to create Keypress method. Here is jquery code that I am using:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    // restrict special characters
                    $('#TextBox1').keypress(function (key) {
                        var regexpns = new RegExp("^[a-zA-Z0-9]+$");
                        var key = String.fromCharCode(event.charCode ? event.which : event.charCode);
                        if (!regexpns.test(key)) {
                            event.preventDefault();
                            document.getElementById("message").style.display = 'block';
                            return false;                       
                        }
                        else
                        {
                            document.getElementById("message").style.display = 'none';
                        }
                    });
                });
            </script>

Complete HTML Markup of webform:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    // restrict special characters
                    $('#TextBox1').keypress(function (key) {
                        var regexpns = new RegExp("^[a-zA-Z0-9]+$");
                        var key = String.fromCharCode(event.charCode ? event.which : event.charCode);
                        if (!regexpns.test(key)) {
                            event.preventDefault();
                            document.getElementById("message").style.display = 'block';
                            return false;                       
                        }
                        else
                        {
                            document.getElementById("message").style.display = 'none';
                        }
                    });
                });
            </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>Enter Username :</td>
                 <td><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <label id="message" style="color: Red; display: none">Special Characters and space not allowed</label></td>
            </tr>
        </table>       
    </div>
    </form>
</body>
</html>



What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon