Custom controls in ASP .NET

Question

Hi,

I am working on a web site project.
I have created custom control for the Time entry which will be similar as that of the widows Time control (Present below the windows clock) and which should accepts hours, minutes, seconds.

Validation for this control is provided in the Java Script by calling some of functions ValidateHours(), ValidateMinutes(), ValidateSeconds() etc.

I added this control in the web page twice one for start time and one for end time then the java scripts methods are also added twice with same names. Which causes validation for only one control.

Please find the code below;

<%@ Control Language="C#" AutoEventWireup="true" %>
 <script language="JavaScript" type="text/jscript"> 
    //Validate Hours
    function ValidateHours() {
        debugger;
        var a = document.getElementById('<%=txtHours.ClientID%>').value;
        if (a == '') {
            document.getElementById('<%=txtHours.ClientID%>').value = "23"
        }
        if (a.length == 1) {
            document.getElementById('<%=txtHours.ClientID%>').value = "0" + a
        }       
        if (a > 23 || a < 0) {
            alert("Hours can't have a value greater than 23");
            document.getElementById('<%=txtHours.ClientID%>').value = "00"
        }
    }
    //Validate Minutes
    function ValidateMinutes() {
        var a = document.getElementById('<%=txtMinutes.ClientID%>').value;
        if (a == '') {
            document.getElementById('<%=txtMinutes.ClientID%>').value = "59"
        }
        if (a.length == 1) {
            document.getElementById('<%=txtMinutes.ClientID%>').value = "0" + a
        }     
        if (a > 59 || a < 0) {
            alert("Minutes can't have a value greater than 59");
            document.getElementById('<%=txtMinutes.ClientID%>').value = "00"
        }
    }
    //Validate Seconds
    function ValidateSeconds() {
        var a = document.getElementById('<%=txtSeconds.ClientID%>').value;
        if (a == '') {
            document.getElementById('<%=txtSeconds.ClientID%>').value = "59"
        }
        if (a.length == 1) {
            document.getElementById('<%=txtSeconds.ClientID%>').value = "0" + a
        }     
        if (a > 59 || a < 0) {
            alert("Seconds can't have a value greater than 59");
            document.getElementById('<%=txtSeconds.ClientID%>').value = "00"
        }
    }
   
    function ValidateNumeric()
    {
        var keyCode = window.event.keyCode;
        if (keyCode > 57 || keyCode < 48)
        window.event.returnValue = false;
    }      
</script>
<table cellpadding="0px" cellspacing="0px" style="background-color:White;">
    <tr>
        <td align="center" valign="middle">          
            <asp:TextBox ID="txtHours" runat="server" Width="18px" BorderWidth="0px"
            MaxLength="2" ToolTip="Hours" onkeypress="ValidateNumeric()"
            onchange="ValidateHours()">00</asp:TextBox>
        </td>
        <td align="center" valign="middle">
            <asp:Label ID="lbl1" runat="server" Text=":"></asp:Label>
        </td>
        <td align="center" valign="middle">           
            <asp:TextBox ID="txtMinutes" runat="server" Width="17px" BorderWidth="0px"
            MaxLength="2" ToolTip="Minutes" onkeypress="ValidateNumeric()"
            onchange="ValidateMinutes()">00</asp:TextBox>           
        </td>
        <td align="center" valign="middle">
            <asp:Label ID="lbl2" runat="server" Text=":"></asp:Label>
        </td>
        <td align="center" valign="middle">           
            <asp:TextBox ID="txtSeconds" runat="server" Width="17px" BorderWidth="0px"
            MaxLength="2" ToolTip="Seconds" onkeypress="ValidateNumeric()"
            onchange="ValidateSeconds()">00</asp:TextBox>           
        </td>       
    </tr>
</table>