validation - 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);" />