Required Field Validation Error in Group Using JQuery

Introduction

This article discusses client-side validation using jQuery and finds it to be very interesting and useful. I thought it would be beneficial if I share my findings here for those who are looking to have an understanding of how jQuery validation works. This article contains the internals of how the jQuery validation works.

A Simple Form

Let us start with a simple example. Our demonstration form contains four fields name, Hobby, comment and agree. As you can see, all four fields are required. If you submit the form without filling in the required fields, you will be prompted with a group error message. Now it's time to see how we will make it.

Step 1: First we have to create a Web Application.

Go to Visual Studio 2010.
New--> And select the Web Application.
Give whatever name you want to.
Click OK.

Step 2: Secondly you have to add a new page to the website.

Go to the Solution Explorer.
Right-click on the project name.
Select add new item.
Add new web page and give it a name.
Click OK.

Step 3: In this step we will see how to add style sheet code. Whenever we write style sheet code you have to be careful that it is written inside the <style></style> tags and you have to place it inside the head section.

Style Code:

Step 4: In this step we have to write the script reference to the aspx page; let us see from where you have to write the script code.

Step 5: Let us see the script code which you have to add inside the <script></script> tags and that will be placed either in hte head section or the body section as you prefer.

Step 6: In this step we have to write the jQuery code which is given below.

Step 7 : In this step you will see the body code of the Default2.aspx page which is given below.

Body Code:

<body bgcolor="#FFB90F">
<form id='akshay' action='http://www.c-sharpcorner.com' method='post'>
<div class='error_group' id='error_group'>
</div>
<ul>
<li>
<div class='label_col'>
Name</div>
<div class='field'>
<input type='text' name='test_field' id='name' /></div>
</li>
<li>
<div class='label_col'>
Hobby</div>
<div class='field'>
<select name='test_field' id='Hobby'>
<option value='0'>Select</option>
<option value='LK'>Computer</option>
<option value='IN'>Game</option>
<option value='UK'>Art</option>
</select></div>
</li>
<li>
<div class='label_col'>
Comment</div>
<div class='field'>
<textarea name='test_field' id='comment'></textarea>
</div>
</li>
<li>
<div class='label_col'>
</div>
<div class='field'>
<input type='checkbox' name='test_field' id='checkboxid' />
I Agree</div>
</li>
<li>
<div class='label_col'>
</div>
<div class='field'>
<input type='submit' value='Save' /></div>
</li>
</ul>
</form>
</body>

Step 8: In this step we will see the complete code of the Default2.aspx page which is given below.

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 runat="server">
<title>Simple jQuery form Validation</title>
<style type="text/css">
.label_col
{
width: 20%;
padding: 5px;
float: left;
}
.field
{
width: 75%;
padding: 5px;
float: left;
}
.error_field
{
width: 75%;
padding: 5px;
float: left;
}
.error_msg
{
display: none;
clear: both;
color: #f00;
}
li
{
width: 100%;
float: left;
}
.error_group
{
background-color: #A52A2A;
color: #00FFFF;
padding: 10px;
display: none;
margin: 5px;
}
</style>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#akshay').submit(function () {
var error = 0;
$('#error_group').html("");
var name = $('#name').val();
if (name == '') {
error = 1;
$('#error_group').append("Name cannot be empty.<br>");
}
var country = $('#Hobby').val();
if (country == '0') {
error = 1;
$('#error_group').append("You should select a Hobby.<br>");
}
var comment = $('#comment').val();
if (comment == '') {
error = 1;
$('#error_group').append("Comment cannot be empty.<br>");
}
if (!($('#checkboxid').is(':checked'))) {
error = 1;
$('#error_group').append("Please Tick the Agree to Terms of Use.");
}
if (error) {
$('#error_group').show();
return false;
} else {
return true;
}
});
});
</script>
</head>
<body bgcolor="#FFB90F">
<form id='akshay' action='http://www.c-sharpcorner.com' method='post'>
<div class='error_group' id='error_group'>
</div>
<ul>
<li>
<div class='label_col'>
Name</div>
<div class='field'>
<input type='text' name='test_field' id='name' /></div>
</li>
<li>
<div class='label_col'>
Hobby</div>
<div class='field'>
<select name='test_field' id='Hobby'>
<option value='0'>Select</option>
<option value='LK'>Computer</option>
<option value='IN'>Game</option>
<option value='UK'>Art</option>
</select></div>
</li>
<li>
<div class='label_col'>
Comment</div>
<div class='field'>
<textarea name='test_field' id='comment'></textarea>
</div>
</li>
<li>
<div class='label_col'>
</div>
<div class='field'>
<input type='checkbox' name='test_field' id='checkboxid' />
I Agree</div>
</li>
<li>
<div class='label_col'>
</div>
<div class='field'>
<input type='submit' value='Save' /></div>
</li>
</ul>
</form>
</body>
</html>