Required Field Validation Using JQuery

Sapna
12y
126.2k
0
1

Article

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.

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

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.

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.

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

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>