Apply Client Side Validation on DOB Selected by User

Introduction

In my previous articles I told you about:

1. How to Determine Age Using Ajax Calendar in ASP.NET Application
2. How to Calculate Age by Inserting DOB Manually.
3. How to Apply Server-side Validation

This article explains how to apply client-side validation on a DOB selected by the user. Earlier articles clearly described how to calculate the age of the user but what if the user selects a date from the future? Or selects a date from 1800 or even earlier than that. We should create an application that should prevent the user from selecting such unnecessary dates, this can be done both by client-side validations or through server-side validations. This article will cover only client-side validation, if you want to do server-side validation then you should follow my next article.

Step 1

I am working on my previous application so most of the code is the same. If you are a new reader than you must add two Textboxes to your application, one for getting the DOB from the user and other for showing the age.

   <asp:TextBox ID="txtDATE_OF_BIRTH" Onchange="return findage();" runat="server" Font-Size="12px" ></asp:TextBox>

 

    <label id="Label34" runat="server" style="color:Gray; font-size:9px">Focus on Textbox to see Calender</label>

    </td>   

        </tr>

        <tr>

            <td >

    <asp:Label ID="Label35" runat="server" CssClass="lbl1" Text="Age"></asp:Label>

    </td>

    <td >

    <asp:TextBox ID="txtCONSULTANT_AGE" runat="server" Font-Size="12px" ></asp:TextBox>

        </td>

Here txtDATE_OF_BIRTH will be used to show the Calendar and txtCONSULTANT_AGE will be used for showing the age of the user.

Step 2

Now you should call an Ajax Calendar Extender.

 <cc1:CalendarExtender runat="server" TargetControlID="txtDATE_OF_BIRTH" Format="yyyy-MM-dd" OnClientDateSelectionChanged="SelectDate" ID="CalendarExtender1"></cc1:CalendarExtender>

Here OnClientDateSelectionChanged os the name of the function passed that is to be called for calculating the age.

Write this code in the Script Tag just below the Calendar Extender:

        <script type="text/javascript">

            function SelectDate(e) {

                var PresentDay = new Date();

                var dateOfBirth = e.get_selectedDate();

                var months = (PresentDay.getMonth() - dateOfBirth.getMonth() +
 (12 * (PresentDay.getFullYear() - dateOfBirth.getFullYear())));

                document.getElementById("txtCONSULTANT_AGE").value = Math.round(months / 12);

                document.getElementById("txtCONSULTANT_AGE").readOnly = true;

            }

    </script>

Now if you run your application then you will see that the Calendar is working properly and the age is also shown.

But I had selected a date from the future and it will not show any type of error or anything else that can prevent me from doing that.

Step 3

Now we will work on the validation part, for validation I will compare the date selected and the date of today, if the date selected is greater than today's date then an error message will be shown.

This code is used for comparing:

         if (dateOfBirth > PresentDay) {

                 alert("error");

                document.getElementById("txtCONSULTANT_AGE").value = "You are Going to Born";

         }

You need to add this JavaScript code in the code written in Step 2, so your final code should be like this:

    <script type="text/javascript">

            function SelectDate(e) {

                var PresentDay = new Date();

                var dateOfBirth = e.get_selectedDate();

                var months = (PresentDay.getMonth() - dateOfBirth.getMonth() +
 (12 * (PresentDay.getFullYear() - dateOfBirth.getFullYear())));

                document.getElementById("txtCONSULTANT_AGE").value = Math.round(months / 12);

                document.getElementById("txtCONSULTANT_AGE").readOnly = true;

                if (dateOfBirth > PresentDay) {

                    alert("error");

                    document.getElementById("txtCONSULTANT_AGE").value = "You are Going to Born";

                }

            }         

    </script>

Now you can run your application and can see the output.

Output

Select a future date from your Calendar and an Error Message will be displayed on your WebPage.

The second TextBox where the age was shown will also contain an unexpected value.