In this article I will explain with an example, how to perform TextBox validation using JavaScript in ASP.Net MVC.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 

Controller

The Controller consists of following Action method.

Action method for handling GET operation

Inside this Action method, simply View is returned.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
}
 
 

View

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.
@{
     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="return isNumeric(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="return isAlphabet(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="return isAlphaNumeric(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

TextBox Validation using JavaScript in ASP.Net MVC
 
 

Screenshot

TextBox Validation using JavaScript in ASP.Net MVC
 
 

Browser Compatibility

The above code has been tested in the following browsers.
Microsoft Edge   FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Demo

View Demo
 
 

Downloads

TextBoxValidations_JavaScript_MVC.zip