Introduction: In this article we will discuss to write Regular Expressions to validate an ASP.NET form using Jquery. To validate a form means whatever the text box we have in the form it will have a value if it is not then it will give a error. validation may be at client side or it may be at server side so by using J Query we are going to validate a form by writing Regular Expression for them. If it has a valid value such that email id is not in it's format then it will give the error that the format of the email id text box does not match with the given format. So let's see how it is created further information is given below.

Step 1: Now firstly I would like to say to open Visual Studio 2010.

New Web

New Web Site

Step 2: Secondly You have to add a .js file to the website folder name as Script.

Add New Item

Add JScript file

Step 3: Now we have to add a new page to the website.

Add New item

New web Page

Step 3: Now we have to write the code for the .js file which will be added later to the source file of default2.aspx page.

Code :

function VForm(e) {
var isvalid = true;
// check that a valid email address has been entered
 var eidrex = /[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}/;
if (!eidrex.test(String($("#eid").val()).toUpperCase())) {
errmsg("eid", "You would have to enter a valid email address.");
isvalid = false;
} else {
errrmv("eid");
}
// check that first name has one or more characters
 var fn=/^[a-zA-z]/;
if ($("#fntxt").val() == '') {
errmsg("fntxt", "Text Box is Empty Field Required.");
isvalid = false;
else if(!fn.test(String($("#fntxt").val()))) {
errmsg("fntxt","Please Enter the only alphabetic value.");
isvalid=false;
}
else {
removeError("fntxt");
}
var ln=/^[a-zA-z]/;
if ($("#lntxt").val() == '') {
errmsg("lntxt", "Text Box is Empty Field Required.");
isvalid = false;
else if(!ln.test(String($("#lntxt").val()))) {
errmsg("lntxt","Please Enter the only alphabetic value.");
isvalid=false;
}
}
else {
errrmv("lntxt");
}
if (!isvalid) {
e.preventDefault();
}
var pwd = /^[A-Za-z]\w{6,}[A-Za-z]$/;
if (!pwd.test(String($("pdtxt").val()))) {
errmsg("pdtxt", "password must be at least 8 characters long and start and end with a letter.");
isvalid = false;
} else {
errrmv("pdtxt");
}
}
 function errmsg(id, msg) {
if ($("#" + id).parent().find("label[class=error]").attr("generated") == "true") {
$("#" + id).parent().find("label[class=error]").css("display", "block");
} else {
$("#" + id).parent().append(<label for="' + id + '" generated ="true" class="error">' + msg + ' </label>').css("display", "block");
 }
}
 function errrmv(id) {
$("#" + id).parent().find("label[class=error]").css("display", "none");
}

Step 5: Further we have to add the reference of the JQuery and JScript file to the source file of .aspx file.

<script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="../Scripts/val.js"></script>

Step 6: In this step we have to write the code for the source file of default2.aspx page.

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head id="Head1" runat="server">
 <script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
 <script type="text/javascript" src="../Scripts/val.js"></script>
 <title></title>
 <script type="text/javascript">
 $(document).ready(function () {
$(".fs").click(function (e) {
VForm(e);
});
});
</script>
 <style type="text/css">
 .error{color:Red;}
</style>
 </head>
<body>
 <form id="form1" runat="server">
 <div>
 Email-ID :-
<asp:TextBox ID="eid" runat="server"></asp:TextBox>
 <br />
 First Name :-
<asp:TextBox ID="fntxt" runat="server"></asp:TextBox>
 <br />
 Last Name :-
<asp:TextBox ID="lntxt" runat="server"></asp:TextBox>
 <br />
 Password :-
<asp:TextBox ID="pdtxt" runat="server" TextMode="Password"></asp:TextBox>
 <br />
 <br />
 <input type="button" id="btn" class="fs" value="Submit" />
 <br />
 </div>
 </form>
 </body>
</html>

Code Description: In this code we are going to make a click event function which will invoke a JScript file function name as VForm whenever you will click on the button it will check all the validation related to the form. $(".fs").click(function (e) {VForm(e); this method will fire the event on click of the button and will check all the validation according to the requirement or defined regular expression.

Step 7: Further we are going to see the design page of the default .aspx page file.

Before Output:

Design Application


Step 8: Now we have to run the application by pressing F5.

Output:

Output