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.

img1.gif

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.

img2.gif

img3.gif

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.

img41.gif

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.

img5.gif

Step 10: In this step we are going to run the Default2.aspx page by pressing F5.

img6.gif

Now click the "Save" Button without filling any entry on the form you will see a group error message.

img7.gif

See more here.

img8.gif

img9.gif

img10.gif

img11.gif

When you fill all the required entries you will get your action site.

img12.gif

Resources