In this article I will explain with an example, how to perform TextBox validation using
JavaScript ASP.Net Core (.Net Core 8) Razor Pages.
Razor PageModel (Code-Behind)
The PageModel consists of following Handler method.
Handler method for handling GET operation
This Handler method kept empty. Hence, it is skipped.
public class IndexModel : PageModel
{
public void OnGet()
{
}
}
Razor Page (HTML)
HTML Markup
The View consists of following elements:
TextBox – For capturing user input.
Here, three HTML Input TextBoxes are used for performing following validations:
1. Allow only Numeric character.
2. Allow only Alphabetic character.
3. Allow only Alphanumeric characters.
The HTML Input TextBoxes have been assigned with a
JavaScript onkeydown event handler, which will be used to call different
JavaScript function which accepts the
KeyCode of the pressed key as parameter.
The HTML Input TextBoxes have also assigned with the
JavaScript onpaste event handler, where FALSE is returned which disables the PASTE operation in the HTML Input TextBox.
SPAN – For displaying Error Message.
Three SPAN elements are used for displaying Error Message for their respective HTML Input TextBoxes.
Each SPAN element has been set with visibility to hidden.
Validating TextBox using JavaScript
First a BOOLEAN variable is created and set to FALSE and it will be used to determine whether the Shift key is pressed or not.
isNumeric
This function gets executed when input is captured in the HTML Input TextBox and it allows only Numeric characters.
Inside this function, a check is performed whether the pressed key is Shift key or not by using KeyCode 16 (Shit key keyCode) and based on that the isShift variable value is set.
Another check is performed which ensures that the pressed key is only Numeric (0-9) key using keyCode of the pressed key.
If validation fails, an Error Message is displayed in SPAN element.
isAlphabet
This function gets executed when input is captured in the HTML Input TextBox and it allows only Alphabetic characters.
Another check is performed which ensures that the pressed key is only Alphabetic (A-Z, a-z) key using keyCode of the pressed key.
If validation fails, an Error Message is displayed in SPAN element.
isAlphanumeric
This function gets executed when input is captured in the HTML Input TextBox and it allows only Alphanumeric characters.
Inside this function, a check is performed whether the pressed key is Shift key or not by using KeyCode 16 (Shit key keyCode) and based on that the isShift variable value is set.
Another check is performed which ensures that the pressed key is only Alphanumeric (A-Z, a-z) or (0-9) key using keyCode of the pressed key.
If validation fails, an Error Message is displayed in SPAN element.
@page
@model TextBoxValidations_JavaScript_Core_Razor.Pages.IndexModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
Numbers:
<input type="text" id="txtNumeric" onkeyup="keyUP(event.keyCode)" onkeydown="returnisNumeric(event.keyCode);" onpaste="return false;" />
<span id="lblNumeric" style="color: Red; visibility: hidden">Only Numeric Characters Allowed</span>
<br />
<br />
Alphabets:
<input type="text" id="txtAlphabets" onkeydown="returnisAlphabet(event.keyCode);" onpaste="return false;" />
<span id="lblAlphabets" style="color: Red; visibility: hidden">OnlyAphabetic Characters Allowed</span>
<br />
<br />
Alphanumeric:
<input type="text" id="txtAlphaNumeric" onkeydown="returnisAlphaNumeric(event.keyCode);" onpaste="return false;" />
<span id="lblAlphanumeric" style="color: Red; visibility: hidden">Only Alphanumeric Characters Allowed</span>
<script type="text/javascript">
var isShift = false;
function keyUP(keyCode) {
if (keyCode == 16) {
isShift = false;
}
}
function isNumeric(keyCode) {
if (keyCode == 16) {
isShift = true;
}
var res = ((keyCode >= 48 && keyCode <= 57 || keyCode == 8 || (keyCode >= 96 && keyCode <= 105)) && isShift == false);
if (!res) {
document.getElementById("lblNumeric").style.visibility = "visible";
} else {
document.getElementById("lblNumeric").style.visibility = "hidden";
}
return res;
}
function isAlphabet(keyCode) {
var res = ((keyCode >= 65 && keyCode <= 90) || keyCode == 8);
if (!res) {
document.getElementById("lblAlphabets").style.visibility = "visible";
} else {
document.getElementById("lblAlphabets").style.visibility = "hidden";
}
return res;
}
function isAlphaNumeric(keyCode) {
if (keyCode == 16) {
isShift = true;
}
var res = (((keyCode >= 48 && keyCode <= 57) && isShift == false) || (keyCode >= 65 && keyCode <= 90) || keyCode == 8 || (keyCode >= 96 && keyCode <= 105));
if (!res) {
document.getElementById("lblAlphanumeric").style.visibility = "visible";
} else {
document.getElementById("lblAlphanumeric").style.visibility = "hidden";
}
return res;
}
</script>
</body>
</html>
Keyboard Keys ASCII (KeyCode) Chart
![ASP.Net Core Razor Pages: TextBox Validation using JavaScript]()
Screenshot
![ASP.Net Core Razor Pages: TextBox Validation using JavaScript]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
