How to format before validation

[eduo]

Hi.

I have a need I'm not sure how to handle. All my solutions so far are inadequate.

I have some forms that need filling, the fields that I want to simplify are time fields.

Currently I validate the time with a pattern ( pattern="^([0-9]{1}|[0-1][0-9]|[1-2][0-3]):[0-5][0-9]$" )

But I need to add a way to pre-format the field to account for users just typing a single integer and understandably expecting the form to understand it.

I have tried using the events, but they all seem to fire immediately upon validation. Even as you're writing. My efforts to get the pre-format to happen just after editing but prior to validation haven't worked out.

(possible values for this single-field form are between 8:00 and 19:00)
Sample scenario 1
User types 8. It's assumed this means 8:00. As soon as he presses enter or tabs out of the field it should be replaced by 8:00, but not before. Validation should happen then.

Sample scenario 2
User type 7. It's assume this means 19:00. As soon as he presses enter or tabs out of the field it should be replaced by 19:00, but not before. Validation should happen then.

The result of validation should run as normal (if the field is valid it opens a second optional field an enables form submission).

I can't make this work. All I try screws up validation, misses events or fires too early so if you type "1" it replaces it immediately with 13:00 and perhaps you wanted to type 14:00 yourself.