24 hour validator

by Sam Fereday

HTML

<input id="timeInput" value="24:01" />
<button id="timeTest">Test</button>
<span id="error">Please enter a correct 24hr format (hh:mm).</span>

CSS

body {
  font: 75%/1.4em arial;
}
#error {
  margin-left: 0.5em;
  padding-top: 0.25em;
  display: block;
  float: left;
  display: none;
}
button {
  float: left;
  margin-left: 0.5em;
}
input {
  float: left;
}

JavaScript

var time = document.getElementById("timeInput");
var button = document.getElementById("timeTest");

function validate(timeStr)
{
    
    var hh = parseInt(timeStr.substr(0,2));
    var mm = parseInt(timeStr.substr(3,2));
    
		return (timeStr.search(/^\d{2}:\d{2}$/) != -1) &&
           (hh >= 0 && hh <= 24) &&
           (mm >= 0 && mm <= 59) &&
           !((hh === 24) && (mm > 00));
           
}
            
button.addEventListener("click", function(e){

  error.style.display = "none";
  if(!validate(time.value))
  	error.style.display = "block";

}, false);