JavaScript Validation Using Key Code And Regular Expression In ASP.NET

Using a JavaScript function, we can validate a field in our ASP.NET page. In this blog, let us see how to do that.

Introduction

 

Sometimes, we need to validate user input before or after they enter the value in a textbox or any other control on a page. At that time, we can check the below conditions. 

 

Below are some sample conditions with functions and Key Code and Regular Expression respectively. 

 

Let's start with the Key Code first.

 

Key Code

 

Suppose, we have a condition that we have allowed only Characters and Tab. 

<asp:TextBox ID="txtname" Width="200px" runat="server" MaxLength="250"
onkeyup="Javascript:
     
      IsCharacter
     
     ();" Style="max-width: 200px; max-height: 80px; min-width: 200px; min-height: 80px;" onkeypress="return IsCharacterNumber(event,this.value.length <= 250);"></asp:TextBox>

function IsCharacter(e) {
   var charCode = (e.which) ? e.which : e.keyCode;
   if (!(charCode >= 65 && charCode <= 90) && !(charCode >= 97 && charCode <= 122) && (charCode != 32 && charCode != 8) && !(charCode == 9)) {
   return false;
   }
return true;
}

When we have a condition that we have allowed only an IP Address.

function IsCheckIP(e) {
var charCode = (e.which) ? e.which : e.keyCode;
if (charCode != 58 && charCode != 47 && charCode != 46 && (!(charCode >= 65 && charCode <= 90)) && (!(charCode >= 97 && charCode <= 122)) && (!(charCode >= 48 && charCode <= 57)) && (charCode != 8) && !(charCode == 9)) {
      return false;
   }
return true;
}

When you have allowed only Numeric values and Tab.

function Numeric(e) {
   var charCode = (e.which) ? e.which : e.keyCode;
   if (!(charCode >= 48 && charCode <= 57) && !(charCode == 9)) {
      return false;
      }
   return true;
}

Suppose, we have a condition that you have allowed only Characters, Numbers, and Tab.

function IsCharacterNumber(e) {
   var charCode = (e.which) ? e.which : e.keyCode;
   if (!(charCode >= 65 && charCode <= 90) && !(charCode >= 97 && charCode <= 122) && (charCode != 32 && charCode != 8) && !(charCode >= 48 && charCode <= 57) && !(charCode == 9)) {
   return false;
   }
return true;
}

Suppose, we have a condition that you allowed only  Character, Numbers, Underscore, and Tab

function IsCharacterNumberUnderScore(e) {
   var charCode = (e.which) ? e.which : e.keyCode;
   if (!(charCode >= 65 && charCode <= 90) && !(charCode >= 97 && charCode <= 122) && (charCode != 32 && charCode != 8) && !(charCode >= 48 && charCode <= 57) && !(charCode == 95) && !(charCode == 9)) {
   return false;
   }
return true;
}

Sometimes, we need to find how many characters are left to enter. So that time, we can use the below code.

 

"Javascript:Remark();"

 

This line calls the Remark function,

<asp:TextBox ID="txtRemark" Width="200px" runat="server" TextMode="MultiLine" MaxLength="450"
onkeyup="Javascript:Remark();" Style="max-width: 200px; max-height: 80px; min-width: 200px; min-height: 80px;" onkeypress="return IsCharacterNumber(event,this.value.length <= 450);"></asp:TextBox>

 <asp:Label ID="Label2" runat="server" CssClass="Label" Text="*" ForeColor="Red"></asp:Label>
                                <br />
  <asp:Label ID="lblRemark" CssClass="LABLE" runat="server" Text="450"></asp:Label>
   <asp:Label ID="Label2" CssClass="LABLE" runat="server" Text="Character Left"></asp:Label>

and here, we call the Remark function.

function Remark() {
            var CharLength = '<%=txtRemark.MaxLength %>';
            var txtMsg = document.getElementById('ContentPlaceHolder2_txtRemark');
            var lblCount = document.getElementById('ContentPlaceHolder2_lblRemark');
            var colorwidth = txtMsg.value.length;

            if (txtMsg.value.length > CharLength) {
                txtMsg.value = txtMsg.value.substring(0, CharLength);
            }
      document.getElementById('ContentPlaceHolder2_lblRemark').innerHTML = CharLength - txtMsg.value.length;
        }

Regular Expression

 

We can use Regular Expression server-side as well as client-side. Here, I will show you how to use the server-side code. The below Namespace is used for Regular Expression.

using System.Text.RegularExpression

Suppose, we have a condition that you have allowed only alphabet and space.

Regex obj1 = new Regex("[a-zA-Z][a-zA-Z ]+[a-zA-Z]$");

if(!obj1.IsMatch(textbox1.Text))
{
   //error Message here
}

Suppose, we have a condition where you have allowed entering the app URL.

Regex obj2 = new Regex(@"[\w+]+(/[\w- ;,./?%&=]*)?.aspx\b");

if(!obj2.IsMatch(textbox1.Text))
{
   //error Message here
}

When we have a condition that you allowed only alphabet, numbers, and underscore.

Regex obj2 = new Regex(@"[\w+]+(/[\w- ;,./?%&=]*)?.aspx\b");

if(!obj2.IsMatch(textbox1.Text))
{
   //error Message here
}

For a condition where you have allowed only Server IP.

Regex obj4 = new Regex(@"^(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?$"); Regex obj5 = new Regex(@"([(HTTP|HTTp|HTtp|Http|http|hTTP|htTP:httP)(s)?://]+)([\w- ;,./?%&=]+[:][\d]*(/?))?");

if(!obj4.IsMatch(textbox1.Text))
{
   //error Message here
}

Suppose, we have allowed only a fully-qualified domain name.

Regex regfqdn = new Regex(@"^(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?");
if(!regfqdn .IsMatch(textbox1.Text))
{
   //error Message here
}

Suppose we have a condition that you allowed only entering location of file and file path.

Regex obj7 = new Regex(@"[\w-]+(/[\w-]+)+([/]+)?");

if(!obj7.IsMatch(textbox1.Text))
{
   //error Message here
}

Suppose we have a condition that you allowed only numbers.

Regex obj9 = new Regex("^[0-9]*$");

if(!obj9.IsMatch(textbox1.Text))
{
   //error Message here
}

Suppose we have condition that you allowed only  alphabet and underscore.

Regex obj1 = new Regex(@"^[a-zA-Z_]*$");
if(!obj1.IsMatch(textbox1.Text))
{
   //error Message here
}