JavaScript Validation inside the Asp.net Control

on
Hello Everybody,
Here I am going to explain you how control inside control works with Java Script functions. Here Is one of my Colleague’s requirement, I am sharing you part of the code.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JSValidator.aspx.cs" Inherits="JSValidator" %>

<!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>Javascript Validator</title>
    <script type="text/javascript">
    function getFocusOnDate(dtControl)
    {
    //alert(dtControl);
        var date = new Date();
        var dd = date.getDate();
        var mm = date.getMonth()+1;
        var yyyy=date.getFullYear();
       
        dd =dd>10?dd:'0'+dd;
        mm =mm>10?mm:'0'+mm;
        var ddMMyyy=dd+"/"+mm+"/"+yyyy;
       
        var cntrlVal = document.getElementById(dtControl);
        if(cntrlVal.value == ddMMyyy)
        {
        cntrlVal.value="";
        }
    }
   
    //On Blur Function
    function setBlurOnDate(dtControl)
    {
    //alert(dtControl);
        var date = new Date();
        var dd = date.getDate();
        var mm = date.getMonth()+1;
        var yyyy=date.getFullYear();
       
        dd =dd>10?dd:'0'+dd;
        mm =mm>10?mm:'0'+mm;
        var ddMMyyy=dd+"/"+mm+"/"+yyyy;
       
        var cntrlVal = document.getElementById(dtControl);
        if(cntrlVal.value == "")
        {
        cntrlVal.value=ddMMyyy;
        }
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:DataList ID="dlCOntrols" runat="server" RepeatLayout="Table" RepeatColumns="4" RepeatDirection="Horizontal">
    <ItemTemplate>
    <table cellpadding="5" cellspacing="0"  style="border:thin 1px gray; background-color:Fuchsia;">
    <tr>
    <td style="width:150px;">
    <asp:TextBox ID="txtDate"  runat="server" Text='<%#Eval("currDate") %>' onfocus="getFocusOnDate(this.id);" onblur="setBlurOnDate(this.id);"></asp:TextBox>
    <asp:TextBox ID="txtAddress" runat="server" Text="Address" onfocus="if(this.value=='Address')this.value='';" onblur="if(this.value=='')this.value='Address';" ></asp:TextBox>
    <asp:TextBox ID="txtPhone" runat="server" Text="Phone" onfocus="if(this.value=='Phone')this.value='';" onblur="if(this.value=='')this.value='Phone';" ></asp:TextBox>
    </td>
    </tr>
    </table>
    </ItemTemplate>
    </asp:DataList>
    </div>
    </form>
</body>
</html>


Here is .aspx.cs code:
protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindDataList();
        }
    }

    protected void BindDataList()
    {
        DataTable dtList = new DataTable();
        dtList.Columns.Add("currDate", typeof(string));
        dtList.Columns.Add("Address", typeof(string));
        dtList.Columns.Add("Phone", typeof(Int32));

        int cols = dlCOntrols.RepeatColumns == 0 ? 1 : dlCOntrols.RepeatColumns;

        for (int i = 0; i < cols; i++)
        {
            DataRow drList = dtList.NewRow();
            drList["currDate"] = DateTime.Now.ToString("dd/MM/yyyy");
            dtList.Rows.Add(drList);
        }

        dlCOntrols.DataSource = dtList;

        dlCOntrols.DataBind();

I hope you liked it.

Comments

Post a Comment