ASP.Net: Text Box validation
Live demo Here
Introduction:
In this article I explain how to create validations for a Text Box control in ASP.Net. I will start with the following three validations:
- Accept alphanumeric characters
- Accept Alphabet characters
- Accept numeric characters
Requirment :
Add the following line in the head section:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
Code:
First write the following script in your page to accept alphanumeric characters :
<script type="text/javascript">
$(function () {
$('#txtalphaNumeric').keydown(function (e) {
if (e.shiftKey || e.ctrlKey || e.altKey) {
e.preventDefault();
} else {
var key = e.keyCode;
if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105))) {
e.preventDefault();
}
}
});
});
When you have done that code, add a TextBox and provide "txtalphaNumeric" for the id of the TextBox like :
<asp:TextBox ID="txtalphaNumeric" runat="server"></asp:TextBox>
2. Accept Alphabet characters
First write the following script in your page :
$(function () {
$('#txtalphabet').keydown(function (e) {
if (e.shiftKey || e.ctrlKey || e.altKey) {
e.preventDefault();
} else {
var key = e.keyCode;
if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) {
e.preventDefault();
}
}
});
});
When you have done that code, add a TextBox and provide "txtalphabet" for the id of the TextBox like:
<asp:TextBox ID="txtalphabet" runat="server"></asp:TextBox>
3. Accept numeric characters
First write the following script in your page :
$(function () {
$('#txtNumeric').keydown(function (e) {
if (e.shiftKey || e.ctrlKey || e.altKey) {
e.preventDefault();
} else {
var key = e.keyCode;
if (!((key == 8) || (key == 46) || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105))) {
e.preventDefault();
}
}
});
});
After you have done that code, add a TextBox and provide "txtalphabet" for the id of the TextBox like:
<asp:TextBox ID="txtNumeric" runat="server"></asp:TextBox>
Complete code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Allow only alphanumeric characters in TextBox</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$('#txtalphaNumeric').keydown(function (e) {
if (e.shiftKey || e.ctrlKey || e.altKey) {
e.preventDefault();
} else {
var key = e.keyCode;
if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105))) {
e.preventDefault();
}
}
});
});
//only alphabet
$(function () {
$('#txtalphabet').keydown(function (e) {
if (e.shiftKey || e.ctrlKey || e.altKey) {
e.preventDefault();
} else {
var key = e.keyCode;
if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) {
e.preventDefault();
}
}
});
});
//Only Numeric
$(function () {
$('#txtNumeric').keydown(function (e) {
if (e.shiftKey || e.ctrlKey || e.altKey) {
e.preventDefault();
} else {
var key = e.keyCode;
if (!((key == 8) || (key == 46) || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105))) {
e.preventDefault();
}
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<b>Enter Text:</b><asp:TextBox ID="txtalphaNumeric" runat="server"></asp:TextBox>Accept alphanumeric characters<b><br />
Enter Text:</b><asp:TextBox ID="txtalphabet" runat="server"></asp:TextBox>
Accept only Alphabets characters
Enter text :<asp:TextBox ID="txtNumeric" runat="server"></asp:TextBox>Accept only Numeric values\
</div>
</form>
</body>
</html>
Live demo Here