Truemag

  • Categories
    • Tips And Tricks
    • Internet
    • PHP
    • Javascript
    • CSharp
    • SQL Server
    • Linux
  • Lastest Videos
  • Our Demos
  • About
  • Contact
  • Home
  • Write With Us
  • Job Request
Home Javascript JQuery Allow only numeric characters or only alphabet characters in textbox

JQuery Allow only numeric characters or only alphabet characters in textbox

In this article, I will demonstrate how to allow user to input only numeric or only alphabet or only alphanumeric characters in a TextBox field by using JQuery. The program also prevents user from copying and pasting invalid characters into the TextBox.
About technical, I use regular expression to prevent unexpected characters in keyup event.

How to implement

++ Desgin HTML with 3 input text box fields :
1) Textbox 1 : Allow only Alphanumeric Characters
2) Textbox 2 : Allow only Numeric Characters
3) Textbox 3 : Allow only Alphabet Characters

<form id="form1" runat="server">
<div>
 
    Allow <strong>only Alphanumeric Characters</strong> in a TextBox
    <asp:TextBox ID="txtAlphaNumeric" runat="server"/>
    <br /><br />
 
    Allow <strong>only Numeric Characters</strong> in a TextBox      
      <asp:TextBox ID="txtNumeric" runat="server"/>
    <br /><br />
 
    Allow <strong>only Alphabet Characters</strong> in a TextBox      
    <asp:TextBox ID="txtAlphabet" runat="server"/>
</div>
</form>

<form id="form1" runat="server"> <div> Allow <strong>only Alphanumeric Characters</strong> in a TextBox <asp:TextBox ID="txtAlphaNumeric" runat="server"/> <br /><br /> Allow <strong>only Numeric Characters</strong> in a TextBox <asp:TextBox ID="txtNumeric" runat="server"/> <br /><br /> Allow <strong>only Alphabet Characters</strong> in a TextBox <asp:TextBox ID="txtAlphabet" runat="server"/> </div> </form>

++ Add JQuery library by including jquery-1.7.1.min.js to head of HTML :
Download JQuery library plugin here

<script type='text/javascript'
    src='Scripts/jquery-1.7.1.min.js'>
</script>

<script type='text/javascript' src='Scripts/jquery-1.7.1.min.js'> </script>

++ Add Javascript code to process textbox fields:

  • A regular expression /[^0-9]/g : find all characters that are not numbers
  • A regular expression /[^a-zA-Z]/g : find all characters that are not alphabets
  • A regular expression /[^a-zA-Z0-9 ]/g : find all characters that are not alphabets or numbers
  • If user enters a character matching with the expression, the character will be replaced with an empty string.

    <script type="text/javascript">
        $(function() {
            $('#txtNumeric').keyup(function() {
                if (this.value.match(/[^0-9]/g)) {
                    this.value = this.value.replace(/[^0-9]/g, '');
                }
            });
            $('#txtAlphabet').keyup(function() {
                if (this.value.match(/[^a-zA-Z]/g)) {
                    this.value = this.value.replace(/[^a-zA-Z]/g, '');
                }
            });
            $('#txtAlphaNumeric').keyup(function() {
                if (this.value.match(/[^a-zA-Z0-9]/g)) {
                    this.value = this.value.replace(/[^a-zA-Z0-9]/g, '');
                }
            });
        });
    </script>

    <script type="text/javascript"> $(function() { $('#txtNumeric').keyup(function() { if (this.value.match(/[^0-9]/g)) { this.value = this.value.replace(/[^0-9]/g, ''); } }); $('#txtAlphabet').keyup(function() { if (this.value.match(/[^a-zA-Z]/g)) { this.value = this.value.replace(/[^a-zA-Z]/g, ''); } }); $('#txtAlphaNumeric').keyup(function() { if (this.value.match(/[^a-zA-Z0-9]/g)) { this.value = this.value.replace(/[^a-zA-Z0-9]/g, ''); } }); }); </script>

    ++ Below is demontration image :

    Only allow numeric or alphabet or alphanumeric characters

    Only allow numeric or alphabet or alphanumeric characters

    Apr 7, 2012quynhnguyen

    Source Code Demo page

    Export Google Analytics Report To PDF In New VersionGodaddy Cancel Domain, Hosting, VPS, Dedicated Server Or Virtual Data Center
    You Might Also Like:
    • JQuery Create Textbox With Count Down Limit Characters
    • ASP.NET JQuery Autocomplete Textbox
    • JQuery How to use DatePicker
    • PHP Remove All Special Characters And Replace Spaces With Hyphens
    • ASP.NET Input only digits in TextBox using Ajax
    • Javascript Problem Set focus textbox on Firefox
    • Jquery checkbox checked
    • JQuery Get selected value of radio button
    • Validate Date With JQuery And Date Object
    • C# ASP.NET Remove leading and trailing quotes(‘) or double quotes (“)
    quynhnguyen
    Link10 years ago JavascriptJavaScript, JQuery, keyup, regular expression14,998
    0
    GooglePlus
    0
    Facebook
    0
    Twitter
    0
    Digg
    0
    Delicious
    0
    Stumbleupon
    0
    Linkedin
    0
    Pinterest
    Most Viewed
    PHP Download Image Or File From URL
    24,460 views
    Notepad Plus Plus Compare Plugin
    How To Install Compare Text Plugin In Notepad Plus Plus
    21,839 views
    Microsoft SQL Server 2008 Attach Remove Log
    Delete, Shrink, Eliminate Transaction Log .LDF File
    17,656 views
    JQuery Allow only numeric characters or only alphabet characters in textbox
    14,998 views
    C# Read Json From URL And Parse/Deserialize Json
    11,723 views
    4 Rapid Development is a central page that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers.
    Recent Posts
    • Things to Learn about Installingderm Loan Type S
    • Online Photo Editor – Free Photoediting Software
    • A Guide to Finding the Best Paper Sellers
    • Photoediting in Home Isn’t Hard to Do!

    • Free Photo Editor Online
    Categories
    • CSharp (45)
    • Facebook Graph API (19)
    • Google API (7)
    • Internet (87)
    • iPhone XCode (8)
    • Javascript (35)
    • Linux (27)
    • MySQL (16)
    • PHP (84)
    • Problem Issue Error (29)
    • Resources (32)
    • SQL Server (25)
    • Timeline (5)
    • Tips And Tricks (141)
    • Uncategorized (647)
    Recommended
    • Custom Software Development Company
    • Online Useful Tools
    • Premium Themes
    • VPS
    2014 © 4 Rapid Development