JSFiddle - React, Tailwind, and code Playground

by ult_combo

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<form>
    <input name="time" placeholder="hh:mm:ss"><br>
    <input type="submit">
</form>

JavaScript

$.validator.addMethod("time24", function(value, element) { 
    if (!/^\d{2}:\d{2}:\d{2}$/.test(value)) return false;
    var parts = value.split(':');
    if (parts[0] > 23 || parts[1] > 59 || parts[2] > 59) return false;
    return true;
}, "Invalid time format.");

$(function() {
    $('form').validate({
        rules: {
            time: {
               required: true,
               time24: true
             }
        }
    });
});