Post
Ask Question

Required Field Validation Using JQuery

Introduction

This article discusses client-side validation using jQuery validation. That is, we will use JavaScript to validate the fields before submitting the form to the server. This is fast and efficient and provides quick replies to your visitor in the event of any errors. However, it is advisable to also validate the data on the server-side before adding it into the database.

A Simple Form

Let us start with a simple example. Our demonstration form contains four fields name, country, 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 an 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 it's a name whatever you want.
  • 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. Here "Akshay.aspx".
  •  Click OK

img2.gif

img3.gif

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

</script>
<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;
        }
</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 that you have to add inside the <script></script> and will be paced either in the head section or body section as you want.

<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 () {
            $('#targets').submit(function () {
                var error = 0;
                var name = $('#name').val();
                if (name == '') {
                    error = 1;
                    $('#name_error_msg').html("Name cannot be empty");
                    $('#name_error_msg').parent().show();
                }
                var country = $('#country').val();
                if (country == '0') {
                    error = 1;
                    $('#country_error_msg').html('You should select a country.');
                    $('#country_error_msg').parent().show();
                }
                var comment = $('#comment').val();
                if (comment == '') {
                    error = 1;
                    $('#comment_error_msg').html('Comment cannot be empty.');
                    $('#comment_error_msg').parent().show();
                }
                if (!($('#checkboxid').is(':checked'))) {
                    error = 1;
                    $('#checkboxid_error_msg').html("Please Tick the Agree to Terms of Use.");
                    $('#checkboxid_error_msg').parent().show();
                }
                if (error) {
                    return false;
                } else {
                    return true;
                }
            });
        });
</script>

Step 7 : This code is for the body of the Akshay.aspx.

Body Code

<body>
    <form id='akshay' runat="server" method='post'>
    <ul>
        <li>
            <div class='label_col'>
                Name</div>
            <div class='field'>
                <input type='text' name='test_field' id='name' />
            </div>
        </li>
        <li class='error_msg'>
            <div class='label_col'>
            </div>
            <div class='error_field' id='name_error_msg'>
            </div>
        </li>
        <li>
            <div class='label_col'>
                Country</div>
            <div class='field'>
                <select name='test_field' id='country'>
                    <option value='0'>Select</option>
                    <option value='IN'>India</option>
                    <option value='AUS'>Australia</option>
                    <option value='AM'>America</option>
                </select></div>
        </li>
        <li class='error_msg'>
            <div class='label_col'>
            </div>
            <div class='error_field' id='country_error_msg'>
            </div>
        </li>
        <li>
            <div class='label_col'>
                Comment</div>
            <div class='field'>
                <textarea name='test_field' id='comment'></textarea>
            </div>
        </li>
        <li class='error_msg'>
            <div class='label_col'>
            </div>
            <div class='error_field' id='comment_error_msg'>
            </div>
        </li>
        <li>
            <div class='label_col'>
            </div>
            <div class='field'>
                <input type='checkbox' name='test_field' id='checkboxid' />
                I Agree
            </div>
        </li>
        <li class='error_msg'>
            <div class='label_col'>
            </div>
            <div class='error_field' id='checkboxid_error_msg'>
            </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 for the Akshay.aspx page; let us see the code, 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></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            $('#targets').submit(function () {
                var error = 0;
                var name = $('#name').val();
                if (name == '') {
                    error = 1;
                    $('#name_error_msg').html("Name cannot be empty");
                    $('#name_error_msg').parent().show();
                }
                var country = $('#country').val();
                if (country == '0') {
                    error = 1;
                    $('#country_error_msg').html('You should select a country.');
                    $('#country_error_msg').parent().show();
                }
                var comment = $('#comment').val();
                if (comment == '') {
                    error = 1;
                    $('#comment_error_msg').html('Comment cannot be empty.');
                    $('#comment_error_msg').parent().show();
                }
                if (!($('#checkboxid').is(':checked'))) {
                    error = 1;
                    $('#checkboxid_error_msg').html("Please Tick the Agree to Terms of Use.");
                    $('#checkboxid_error_msg').parent().show();
                }
                if (error) {
                    return false;
                } else {
                    return true;
                }
            });
        });
</script>
</script>
<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;
        }
</style>
<body>
<form id='akshay' runat="server" method='post'>
    <ul>
        <li>
            <div class='label_col'>
                Name</div>
            <div class='field'>
                <input type='text' name='test_field' id='name' />
            </div>
        </li>
        <li class='error_msg'>
            <div class='label_col'>
            </div>
            <div class='error_field' id='name_error_msg'>
            </div>
        </li>
        <li>
            <div class='label_col'>
                Country</div>
            <div class='field'>
                <select name='test_field' id='country'>
                    <option value='0'>Select</option>
                    <option value='IN'>India</option>
                    <option value='AUS'>Australia</option>
                    <option value='AM'>America</option>
                </select></div>
        </li>
        <li class='error_msg'>
            <div class='label_col'>
            </div>
            <div class='error_field' id='country_error_msg'>
            </div>
        </li>
        <li>
            <div class='label_col'>
                Comment</div>
            <div class='field'>
                <textarea name='test_field' id='comment'></textarea>
            </div>
        </li>
        <li class='error_msg'>
            <div class='label_col'>
            </div>
            <div class='error_field' id='comment_error_msg'>
            </div>
        </li>
        <li>
            <div class='label_col'>
            </div>
            <div class='field'>
                <input type='checkbox' name='test_field' id='checkboxid' />
               I Agree
            </div>
        </li>
        <li class='error_msg'>
            <div class='label_col'>
            </div>
            <div class='error_field' id='checkboxid_error_msg'>
            </div>
        </li>
        <li>
            <div class='label_col'>
            </div>
            <div class='field'>
                <input type='submit' value='Save' /></div>
        </li>
    </ul>
    </form>
</body>

Step 9 : In this step we will see the design of the Akshay.aspx page which is given below.

img5.gif

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

img6.gif

Now if you do not fill any entry and click on the Save Button you will see the error message like as:

img7.gif

img8.gif

img9.gif

img10.gif

img11.gif

Resources


Similar Articles