Validate Time format with AM PM using JavaScript and Regular Expressions

Last Reply on Jan 22, 2014 11:53 PM By Azim

Posted on Jan 22, 2014 10:17 PM

I am trying to add a validation to dynamically added textboxes. The textbox should allow input of type (e.g)11:30 AM/PM No strings other than that should be entered. How can I achieve that? Below is the code for length validation of the input field.

 

function ValidateAddTime(txt, keyCode) {
var val = txt.value;
var lblmesg = document.getElementById("<%=lblMesg.ClientID%>");
if (val.length < 8 || val.length > 8) {
lblmesg.style.color = "red";
lblmesg.innerHTML = "Required Format: hh:mm AM|PM";
}
else {
lblmesg.innerHTML = "";
}

//Add text box function
function GetDynamicTextBox(value) {
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" onkeyup = "ValidateAddTime(this, event.keycode)" />' +
'<input type="button" value="Remove" onclick = "RemoveTextBox(this)" />'
}

 

Posted on Jan 22, 2014 11:53 PM Modified on on Jan 23, 2014 12:01 PM

This time i have done this differently. Please refer it.

HTML:

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

<!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 id="Head1" runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $("[id*=textbox1]").live("change", function () {
            debugger;
            var validTime = $(this).val().match(/^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/);
            if (!validTime) {
                $(this).val('').focus().css('background', '#fdd');
            } else {
                $(this).css('background', 'transparent');
            }
        });
    </script>
    <script type="text/javascript">

        function GetDynamicTextBox(value) {
            return '<input name = "DynamicTextBox" id="textbox1" type="text" value = "' + value + '"  />' +
                    '<input type="button" value="Remove" onclick = "RemoveTextBox(this)" />'
        }
        function AddTextBox() {
            var div = document.createElement('DIV');
            div.innerHTML = GetDynamicTextBox("");
            document.getElementById("TextBoxContainer").appendChild(div);
        }

        function RemoveTextBox(div) {
            document.getElementById("TextBoxContainer").removeChild(div.parentNode);
        }

        function RecreateDynamicTextboxes() {
            var values = eval('<%=Values%>');
            if (values != null) {
                var html = "";
                for (var i = 0; i < values.length; i++) {
                    html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
                }
                document.getElementById("TextBoxContainer").innerHTML = html;
            }
        }
        window.onload = RecreateDynamicTextboxes;
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input id="btnAdd" type="button" value="add" onclick="AddTextBox()" />
    <br />
    <br />
    <div id="TextBoxContainer">
        <!--Textboxes will be added here -->
    </div>
    <br />
    <asp:Button ID="btnPost" runat="server" Text="Post" OnClick="Post" />
    <asp:Label ID="lblMesg" Text="" runat="server" />
    </form>
</body>
</html>

output:

If the Time is not in proper format then TextBox color will become red.

Thank you.

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html