Auto Time Format in Textbox Using JavaScript (HH:MM:SS) – With Validation
This JavaScript function automatically formats time in HH:MM:SS format while typing inside a textbox. It restricts non-numeric characters, inserts colons at the correct positions, and validates hours, minutes, and seconds in real time. The script ensures correct formatting for time-based forms such as attendance, login records, scheduling tools, and event management applications.
Below is the complete working code:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input id="txtStartTime" type="text" placeholder="HH:MM:SS" onkeypress="formatTime(this)" MaxLength="8" />
<script type="text/javascript">
function formatTime(timeInput) {
var regex = new RegExp("^[0-9]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
intValidNum = timeInput.value;
if (intValidNum < 24 && intValidNum.length == 2) {
timeInput.value = timeInput.value + ":";
return false;
}
if (intValidNum == 24 && intValidNum.length == 2) {
timeInput.value = timeInput.value + ":";
return false;
}
if (intValidNum > 24 && intValidNum.length == 2) {
timeInput.value = "";
return false;
}
if (intValidNum.length == 5 && intValidNum.slice(-2) < 60) {
timeInput.value = timeInput.value + ":";
return false;
}
if (intValidNum.length == 5 && intValidNum.slice(-2) > 60) {
timeInput.value = timeInput.value.slice(0, 2) + ":";
return false;
}
if (intValidNum.length == 5 && intValidNum.slice(-2) == 60) {
timeInput.value = timeInput.value.slice(0, 2) + ":00:";
return false;
}
if (intValidNum.length == 8 && intValidNum.slice(-2) > 60) {
timeInput.value = timeInput.value.slice(0, 5) + ":";
return false;
}
if (intValidNum.length == 8 && intValidNum.slice(-2) == 60) {
timeInput.value = timeInput.value.slice(0, 5) + ":00";
return false;
}
}
</script>
</html>