Category >
JAVASCRIPT
|| Published on :
Sunday, January 21, 2018 || Views:
22669
||
Allow only AlphaNumeric ( Alphabets and Numbers) characters and space only
Introduction
Here Pawan Kumar will explain how to Allow only AlphaNumeric ( Alphabets and Numbers) characters and space only in TextBox using Javascript and jQuery(Example & Demo)
Description
In previous post I have explained
How to Display Decimal Numbers As Money using Transact-SQL,
How to Access Data From Ordered Dictionary using C#,
How to use Regular Expression (Regex) to accept only Alphanumeric (Alphabets and Numbers) in TextBox in ASP.Net using RegularExpression Validator,
Set or Display Watermark Text for ASP.Net TextBox, Password and MultiLine TextArea using jQuery in ASP.Net with demo and Example codes,
Create Login Page In ASP.NET Web Application Using ASP.Net, C# And SQL Server,
Perserve/Retain state for dynamically created ASP.Net Dynamic Controls ViewState on PostBack, and many more articles.
Now I will explain How to Allow only AlphaNumeric ( Alphabets and Numbers) characters and space only in TextBox using Javascript and jQuery(Example & Demo)
So follow the steps to learn Allow only AlphaNumeric ( Alphabets and Numbers) characters and space only in TextBox using Javascript and jQuery(Example & Demo)
Method 1: Javascript validation for textbox to allow only alphanumeric
In some specific condition we have to allow only alphanumeric characters in a textbox using javascript. We will write code in such a way that the textbox will accept only AlphaNumeric ( Alphabets and Numbers) characters and space character. We can also define some other special character which we want to accept in textbox.
so let's start the coding part for alphanumeric validation in javascript for textbox.
In our HTML markup we have to define one textbox with the following markup
<input type="text" id="text1" onkeypress="return IsAlphaNumeric(event);" ondrop="return false;" onpaste="return false;" />
This textbox will have three events "onkeypress", "ondrop" and "onpaste", these events will not accept text when it is pasted or after drag and drop using mouse.
On Kepress event it will pass the entered text to IsAlphaNumeric javascript function and validate it so that allow only alphanumeric in textbox using javascript on keypress.
Complete HTML Markup Codes:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
Alphanumeric value:
<input type="text" id="text1" onkeypress="return IsAlphaNumeric(event);" ondrop="return false;"
onpaste="return false;" />
<span id="error" style="color: Red; display: none">
* Special Characters not allowed
</span>
<script type="text/javascript">
var specialKeys = new Array();
specialKeys.push(8); //Backspace Character
specialKeys.push(9); //Tab Character
specialKeys.push(46); //Delete Character
specialKeys.push(36); //Home Character
specialKeys.push(35); //End Character
specialKeys.push(37); //Left Character
specialKeys.push(39); //Right Character
function IsAlphaNumeric(e) {
var keyCode = e.keyCode == 0 ? e.charCode : e.keyCode;
var ret = ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122) || (specialKeys.indexOf(e.keyCode) != -1 && e.charCode != e.keyCode));
document.getElementById("error").style.display = ret ? "none" : "inline";
return ret;
}
</script>
</body>
</html>
Method 2: TextBox Alphanumeric validation in jquery with Example
Include jQuery file from any CDN network. In current we using Google jQuery CDN. Code are below
<script type='text/javascript'
src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'>
Now we will write a function which will remove characters which are not Alphanumeric
<script type="text/javascript">
$(function() {
$('input.alpha[$id=tb1]').keyup(function() {
if (this.value.match(/[^a-zA-Z0-9 ]/g)) {
this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '');
}
});
});
</script>
Complete HTML Markup for code allow only alphanumeric in textbox using jQuery are below
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript'
src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'>
</script>
<style type="text/css">
.exceeded {
background-color: red;
}
.Div {
background-color: White;
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial;
font-size: 12px;
color: #000000;
width: 710px;
margin-left: auto;
margin-right: auto;
padding: 10px;
border: solid 1px #c6cfe1;
}
</style>
<script type="text/javascript">
$(function() {
$('input.alpha[$id=tb1]').keyup(function() {
if (this.value.match(/[^a-zA-Z0-9 ]/g)) {
this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '');
}
});
});
</script>
</head>
<body>
<div class="Div">
<h2>Allow Only Alphanumeric Characters in a TextBox</h2>
<input name="tb1" type="text" value="Try entering Non alphanumeric char" id="tb1" title="Try entering Non alphanumeric char" class="alpha" style="border-color:#94C7EF;border-width:1px;border-style:solid;" />
<br /><br />
Tip: Examples of some non-alphanumeric characters <br />
are ~!@~#$%^&* and so on.
</div>
</body>
</html>
Conclusion:
So, In this tutorial we have learned, Allow only AlphaNumeric ( Alphabets and Numbers) characters and space only in TextBox using Javascript and jQuery(Example & Demo)