time validation

Author: negar-binary

index.html

@@ -962,7 +962,7 @@ <h3>Date Picker:</h3>
                         </div>
                         <h3>Time Picker:</h3>
                         <div>
-                            <input type="text" id="time-picker" size="12" readonly="readonly"/>
+                            <input type="text" id="time-picker" size="12" maxlength="5"/>
                         </div>
                     </div>
                     <div class="f-item">
@@ -972,7 +972,7 @@ <h3>Time Picker:</h3>
   Date Picker:
   &lt;input type=&quot;text&quot; id=&quot;date-picker&quot; size=&quot;12&quot; readonly=&quot;readonly&quot;/&gt;
   Time Picker:
-  &lt;input type=&quot;text&quot; id=&quot;time-picker&quot; size=&quot;12&quot; readonly=&quot;readonly&quot;/&gt;
+  &lt;input type=&quot;text&quot; id=&quot;time-picker&quot; size=&quot;12&quot; maxLength=&quot;5&quot;/&gt;
   &lt;script type=&quot;text/javascript&quot;&gt;
   var date = new Date();
   $('#date-picker').datepicker({
@@ -981,14 +981,22 @@ <h3>Time Picker:</h3>
     changeYear: true,
     minDate: date,
   });
-  $(&quot;#time-picker&quot;).on('click', function() {
-    date = new Date();
-    $(this).timepicker('destroy').timepicker({
-      minTime: {
-        hour: date.getHours(),
-        minute: date.getMinutes()
+  $(&quot;#time-picker&quot;)
+    .on('click', function() {
+      date = new Date();
+      $(this).timepicker('destroy').timepicker({
+        minTime: {
+          hour: date.getHours(),
+          minute: date.getMinutes()
+        }
+      });
+    })
+    .on('keypress', debounce(function(time) {
+      var regex = new RegExp(time);
+      if (!/^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/.test(regex)) {
+        $('#time-picker').parent().append($('<p>', {class: 'error-msg', text: 'Time is invalid'}));
       }
-    });
+    }));
   });
   &lt;/script&gt;
                                 </code>

style.js

@@ -63,10 +63,20 @@ $(document).ready(function() {
                         minDate: new Date(),
                       });
     attachTimePicker();
-    $("#time-picker").on('click', function() {
-        $(this).timepicker('destroy');
-        attachTimePicker();
-    });
+    $("#time-picker")
+        .on('click', function() {
+          $(this).timepicker('destroy');
+          attachTimePicker();
+        })
+        .on('keypress', debounce(function(e) {
+            if (!/^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/.test(e.target.value)) {
+                if ($('#invalid-time').length === 0) {
+                    $('#time-picker').parent().append($('<p>', {class: 'error-msg', id: 'invalid-time', text: 'Invalid time'}));
+                }
+            } else {
+                $('#invalid-time').remove();
+            }
+        }));
 
     function attachTimePicker() {
         var date = new Date();
@@ -77,4 +87,21 @@ $(document).ready(function() {
             }
         });
     }
+
+    function debounce(func, wait, immediate) {
+        'use strict';
+        var timeout;
+        var delay = wait || 500;
+        return function() {
+            var context = this, args = arguments;
+            var later = function() {
+                timeout = null;
+                if (!immediate) func.apply(context, args);
+            };
+            var callNow = immediate && !timeout;
+            clearTimeout(timeout);
+            timeout = setTimeout(later, delay);
+            if (callNow) func.apply(context, args);
+        };
+    }
 });