How to validate with Javascript an Input text with Hours and Minutes

Question

I have to build an HTML Form with an Input text field for Hours and Minutes.
Something like:

Name : [Foo]
Surname : [Bar]
Task : [Spam]
Hours Minutes : [00:15] <-- Input text.

How can I help/validate/force user to compile Hours and Minutes values in the only allowed HH:mm format using Javascript? ^*

Valid time range: from 00:00 to 23:59

^{* I can't use Jquery and of course I will double check the submitted value server side}

Answer 1

Either with the following regular expression :

^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$ 

Or by hand, but I strongly suggest the RegExp :) A simple example :

function validateHhMm(inputField) {     var isValid = /^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$/.test(inputField.value);      if (isValid) {       inputField.style.backgroundColor = '#bfa';     } else {       inputField.style.backgroundColor = '#fba';     }      return isValid;   }

<input type="text" onchange="validateHhMm(this);" />

Answer 2

The RegExp from the first answer doesn't match the OP's query correctly.

^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$ 

Should be

^([0-1][0-9]|2[0-3]):([0-5][0-9])$ 

Matches 00-19 or 20-23 : 00-59

OP requested validation of HH:MM in the range 00:00 - 23:59

No seconds. 24:00 should not be valid. Double digits for input of hour and minute.