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: 13037
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

dharmend...

0 1

Reply
User: dharmendr
Replied: on Oct 31, 2016 11:02 PM
Report

Hi nedash,

Please explain in more detail.

nedash

0 2

Reply
User: nedash
Replied: on Nov 01, 2016 06:56 AM
Report

dharmendr says:
Please explain in more detail.

see I used below code for currency

  <script type="text/javascript">
        $(function () {
            $('#TextBox1').priceFormat({
                prefix: '',
                thousandsSeparator: ',',
                centsSeparator: ',',
                limit: 10,
                centsLimit: 0
            });
        });
    </script>

when I click on textbox it will show like:

---,---,---

and I can type number and it automatically put( , )(sepratore) between number like: 500,000,000

now I want do same thing for Time I want when I click on text box it will show in textbox --:-- that I can type number and it automatically put( : ) between number like 12:50 (time format)

Best regards

neda

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

Implement Time validation for TextBox Value using jQuery

Company

Explore

Follow us

Contact Us