Jquery - Validating time value on a form - correct way?

Question

After google searching, searching this site as well as jQuery found there was no easy way to validate time value.

By the looks of things it suggest using addMethod and use the to regexpess the value to check against what time should look like.

However decided to look at the jquery.validate.js and how dateISO was checked, it looked lot easier way to do it, so I then copied all data relating to dateISO and called it timeISO and changed the string to validate time and used the following time sting

^([01]\d|2[0-3]):[0-5]\d:[0-5]\d$ 

Is there some reason why one should not modify jquery.validate.js and do it the way I have? Just a little bit worried as all my searching on google and this forum it was never suggested.

Answer 1

You can add custom methods to jQuery.validate. There's probably one available for this but I coded this 24h time format validation as an example:

$.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.");

Fiddle

Documentation.

You can also sum it up in a single regular expression (source):

([01]?[0-9]|2[0-3])(:[0-5][0-9]){2}

And if you're using HTML5, you can use the pattern attribute:

<input type="text" pattern="([01]?[0-9]|2[0-3])(:[0-5][0-9]){2}" 
    required="required" placeholder="hh:mm:ss" />

Fiddle

Keep using the jQuery.validate method if you need compatibility with older browsers though:

$.validator.addMethod("time24", function(value, element) {
    return /^([01]?[0-9]|2[0-3])(:[0-5][0-9]){2}$/.test(value);
}, "Invalid time format.");

Demo

Answer 2

I know it's been a while, but I think the best solution is to check the additional-methods.js library. (You can download it from http://jqueryvalidation.org/)

There are two validations: "time12h" and "time".