Check that the user is entering a time format? eg 13:00

Question

Hi guys,

Basically, I'd like to have an input that when blur'd, will check the input to make sure it's in the format...

[24hour] : [minutes]

So for example 13:00, or 15:30.

So I guess I have to split it up into three parts, check the first bit is between 0 and 24, then check it has the semi-colon, then check it has a number between 0 and 60.

Going more complicated than that, it'd be fantastic to have it so if the user enters 19 it'll complete it as 19:00 for example.

I am using jQuery fwiw, but regular code is fine, for example I'm using this little piece of code so far which works fine, to convert . inputs to :

tempval = $(this).val().replace(".", ":");
$(this).val(tempval);

Not sure where to start with this, if anyone could recommend me some reading that'd be fantastic, thank you!

Answer 1

([0-1 ]?[0-9]|2[0-3]):([0-5][0-9])

I think that's the regex you're looking for (not specifically for javascript though).

http://www.regular-expressions.info/ This site has an excellent amount of info for language-specific regular expressions! Cheers!

Answer 2

There are a bunch of widgets that already deal with time validation - try googling for "jQuery time widget" - the first result doesn't look bad.

Answer 3

var re = /^(\d+)(:\d+)?$/;
var match = re.match(yourstring);

Now if the match has succeeded match is an array with the matched pieces: match[0] is the whole of yourstring (you don't care about that), match[1] has the digits before the colon (if any colon, else just digits), match[2] if it exists has the colon followed by the digits after it. So now you just need to perform your numeric tests on match[1], and possibly match[2] minus the leading colon, to ensure the numbers are correct.

Answer 4

I suggest using masked input That way the wrong input will be prevented in the first place.

Disclaimer: I haven't used that plugin myself, just found it by keywords "masked input"