Introduction
This article explains how to validate a form on a click of an Anchor using jQuery.
In this article I will apply the jQuery Validations to a WebForm and they will be validated on the click of an Anchor. Now you must be thinking, what's new so that we can Validate easily using a jQuery Plug-in in our form and that will do our work? But no, there is a problem, we use Anchor to take the user to some other WebForm so it doesn't submit the WebForm. Now if the form is not submitted then how will you validate it? This article will help you solve this problem.
Let's see the procedure required to create such an application.
Step1
First of all you need to download two External Files or .js files, these are:
- jQuery.js
- jQuery.validate.js
These can be either downloaded from the jQuery official WebSite or you can download the Zip File present at the start of this article.
After downloading you need to apply them in the Head Section of your application.
<head runat="server">
<title></title>
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
</head>
Step 2
Now I will create some sample Textboxes and an Anchor on which validation is to be applied.
<body>
<form id="form1" runat="server">
<div>
<span>First Name</span>
<input type="text" name="name">
</div>
<div>
<span >E-Mail ID</span>
<input type="text" name="email">
</div>
<div >
<span >Mobile Number</span>
<input type="text" maxlength="10" name="field">
</div>
<div>
<a href="#">Click</a>
<asp:Button runat="server" Text="submit" />
</div>
</form>
</body>
Here you can see that first I took three Textboxes, in these Textboxes some text is passed in the "name", this text is taken from the function that will be created in a future step.
After the Textboxes, one Anchor and one Button are added. You must now be thinking, if I am going to show the validations using Anchor then why I did I take a Button? That's because, using this Button I will show you that the button click is validating the form easily but the Anchor is not at all validating the form as you can see in this output.
First I clicked the Button and you can see that jQuery Validations are working perfectly.
![jQuery Validation on Click of Anchor]()
But if I click the Anchor than nothing happens, the # in the URL is the proof that the Anchor was clicked but the Validations didn't work.
![jQuery Validation on Click of Anchor]()
Step 3
Now I will show you how I applied the validations on this form.
Write this code in the head section of your application:
<script>
$(document).ready(function() {
$("#form1").validate({
submitHandler: function (form) {
SubmittingForm();
},
rules: {
name: "required",
email: {
required: true,
email: true
},
field: {
required: true,
digits:true
}
}
});
});
</script>
Here I have created a function that will work on the submit of the WebForm, in the rules all the validations are applied.
The Required Field Validation is applied to all the Textboxes, since the name "name" is used, for Email ID "email" is used and for Telephone number "field" is used, in the "email" email is set to true. This will check whether the user had entered the value in correct email format or not, to check whether the user entered digits or letters and digits it is set to true.
This small function is enough to apply all these validations.
Step 4
I will now show you what has helped me to apply these validations on an Anchor click as well.
Again jQuery is used to solve this problem. You need to write this on the onclick event of the Anchor:
onClick="$(this).closest('form').submit();"
This will make the Anchor submit the Form on it's click and since our Form will be submitted our validations will be activated and will start reacting.
So now the complete code of this application is as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script>
$(document).ready(function() {
$("#form1").validate({
submitHandler: function (form) {
SubmittingForm();
},
rules: {
name: "required",
email: {
required: true,
email: true
},
field: {
required: true,
digits:true
}
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span>First Name</span>
<input type="text" name="name">
</div>
<div>
<span >E-Mail ID</span>
<input type="text" name="email">
</div>
<div >
<span >Mobile Number</span>
<input type="text" maxlength="10" name="field">
</div>
<div>
<a href="#" onClick="$(this).closest('form').submit();">Click</a>
<asp:Button runat="server" Text="submit" />
</div>
</form>
</body>
</html>
Output
Now if you run your application and click on your Anchor than you will see that the validations are working perfectly on the click of the Anchor as well.
![jQuery Validation on Click of Anchor]()
You can see in the URL that # is added at the end of it, which is a proof that the Anchor was clicked and Validations are working.
Now I will check the Email Validation.
![jQuery Validation on Click of Anchor]()
Now I will check the Digit validation.
![jQuery Validation on Click of Anchor]()