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:
<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>
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.
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
Step 6: In this step we have to write the jQuery code which is given below.
<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>
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>
Step 9 : In this step we will see the design of the Default2.aspx page which is given below.
Step 10: In this step we are going to run the Default2.aspx page by pressing F5.
Now click the "Save" Button without filling any entry on the form you will see a group error message.
See more here.
When you fill all the required entries you will get your action site.
Resources