Implement Time validation for TextBox Value using jQuery

nedash

SOLVED CLOSED ACTIVE ANSWERED
User: nedash
Posted: on Oct 31, 2016 11:02 PM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 11819
Sample Code: Download

there is textbox in page that I want users enter time on it I want when click textbox it will change to time format like:

--:--

that users can type time:

12:45

How I can do it?

Best regards

neda

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Nov 02, 2016 08:44 AM
Report

Hi nedash,

Refer the below sample.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*=txtTime]').mask('00:00');
            $('[id*=txtTime]').on("change", function () {
                var reg = /^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;
                if (!reg.test($('[id*=txtTime]').val())) {
                    alert("Please enter valid time in 24 hour format");
                    $('[id*=txtTime]').val('');
                    $('[id*=txtTime]').focus();
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input name="txtTime" type="text" maxlength="5" id="txtTime" placeholder="--:--"
            style="text-align: center" />
    </div>
    </form>
</body>
</html>

Demo

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

Implement Time validation for TextBox Value using jQuery

Company

Explore

Follow us

Contact Us