Validate Form on Click of Anchor Using jQuery

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:

1. jQuery.js
2. 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.

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.

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