Regular Expression for HTML5 input type=time

Question

I am trying to find a regular expression that plays nicely with the input type of 'time'. I want to use the new HTML5 input type=time, because this form will mostly be accessed on a mobile device, so it would be nice if the user was presented with a time picker.

However, some browsers don't do anything special with that input type, so I still require a regular expression.

I've tried both these examples:

Validating time-only input in asp.net MVC unobtrusive validation

24 hour time regex for HTML 5

They work when the input type=text, however they fail when I change it to time.

Thank you

EDIT

The regular expression should validate the time with AM/PM, however it doesn't matter if they enter in a leading 0 (03:00AM) or no minutes (3am).

Essentially it just needs to work with a time input:

<input data-val="true" data-val-regex="Invalid Time." data-val-regex-pattern="^(0[1-9]|1[0-2]):[0-5][0-9] (am|pm|AM|PM)$" name="StartTime" type="time" value="" />

This returns invalid time when using the chrome time picker.

Answer 1

I have good and bad news...

The bad one is that you cannot use the pattern attribute in input types different from text, search, url, tel, email, and password .

While this is valid:

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

This would not be:

<input type="time" pattern="([01]?[0-9]{1}|2[0-3]{1}):[0-5]{1}[0-9]{1}"/>

The good news is that you may not need to use any pattern in type=time , since it already has a pattern of its own :

type=time (HH:MM)
- time value with no time zone in 24-hour military format.

EDIT

I noticed your edit with the following code:

<input data-val="true"
 data-val-regex="Invalid Time."
 data-val-regex-pattern="^(0[1-9]|1[0-2]):[0-5][0-9] (am|pm|AM|PM)$"
 name="StartTime" type="time" value="" />

I also noticed that people using those data attributes , they still use type="text" . I assume that is the reason why it "returns invalid time when using the chrome time picker".

I haven't find any case where type="time" works with other patterns (even with data- ), and it seems this answer already explained it: html5 time inputs shows 12 hours

If you really need to have the AM and PM you can try to use type="text" with the regex pattern and trigger the datepicker through Javascript.

Answer 2

Okay, so based on Armfoot's response, I decided to use Modernizr to achieve cross-browser time input support. Like I mentioned in my question, the input type needs to be "time" for mobile purposes, because IMO the time picker improves user experience.

I'm not sure if this is the BEST approach, but here is what I did:

Here is the starting HTML for this particular form element:

<div class="form-group">
    <label for="StartTime">Time Started</label>
    <input class="form-control" type="text" data-type="time" data-val="true" data-val-regex="Time is invalid" data-val-regex-pattern="^(0?[1-9]|1[0-2]):[0-5][0-9]\s*[aApP][mM]\s*$" data-val-required="Start time is required" id="StartTime" name="StartTime" placeholder="Time Started"  value="" />
    <span class="field-validation-valid" data-valmsg-for="StartTime" data-valmsg-replace="true"></span>
</div>

The initial type is set to "text", and the regular expression for validating the time is:

^(0?[1-9]|1[0-2]):[0-5][0-9]\s*[aApP][mM]\s*$

I used the same expression from the link posted in my question, however I added "\\s*" between the time and the AM/PM and also one afterwards, so the it doesn't matter how many spaces go between AM/PM or if the user accidentally adds a space afterwards. The 0? also makes the leading 0 optional.

For JavaScript, I added:

//detect if time input is supported
if (Modernizr.inputtypes.time) {
    $('*[data-type="time"]').attr('type', 'time');
    $('*[data-type="time"]').removeAttr('data-val-regex');
    $('*[data-type="time"]').removeAttr('data-val-regex-pattern');
}

The Modernizr conditional statement checks if the input type "time" is supported by the browser. If it is supported, it changes the type to "time", and removes the data-val-regex attributes since those are NOT supported for type="time".

This seems to work fine across all browsers and devices. I've tested it on Chrome/Chrome Mobile/IE/Firefox/iPad (Safari). The time pickers show up nicely on the iPad and the Nexus devices making this work well for mobile purposes. The regex works properly on Firefox and IE where the time input doesn't get rendered.