JS Mask for Hours Validation

Question

I’m using in a project the jQuery Masked Input. I made a mask like this:

<script>
    $(document).ready(function () {
        $("#QuantidadeHoras").mask("99:99");
    });
</script>

The <input> just let me fill in the field with numbers, but I can type an invalid time, for example, 88:88. The right thing would be to fill in the minutes between 00 and 59.

How can I make the mask not allow this kind of fill?

Answer 1

I had to put in a pastebin why don’t you let me pull the source, but the originals are:

<script type="text/javascript" src="https://raw.githubusercontent.com/RobinHerbots/jquery.inputmask/2.x/js/jquery.inputmask.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/RobinHerbots/jquery.inputmask/2.x/js/jquery.inputmask.extensions.js" ></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/RobinHerbots/jquery.inputmask/2.x/js/jquery.inputmask.date.extensions.js"></script>

$(document).ready(function(){
    $("#time").inputmask("h:s",{ "placeholder": "hh/mm" });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://pastebin.com/raw/5ZtAJd0v"></script>
<script type="text/javascript" src="https://pastebin.com/raw/fb6hwXMD"></script>
<script type="text/javascript" src="https://pastebin.com/raw/fkjwWpFs"></script>

<div>
    <input type="text" id="time" value=""/> 
</div>

More information here: https://github.com/RobinHerbots/jquery.inputmask/blob/3.x/README_date.md

Using the 3.x I couldn’t make it work.

Answer 2

I advise you to use the http://igorescobar.github.io/jQuery-Mask-Plugin/

If you take a look he has an option of pattern that from what I understand you can configure a Regexp with the crease accepted to your mask.

The code would look like this for example:

var mask = "HH:MM",
    pattern = {
        'translation': {
            'H': {
                pattern: /[0-23]/
            },
            'M': {
                pattern: /[0-59]/
            }
        }
    };

$("#QuantidadeHoras").mask(mask, pattern);

jsFiddle: http://jsfiddle.net/2oxak786/

Answer 3

It is also possible to solve this problem using pure javascript, with the following regex:

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

Entrances:

válidas
20:59
00:59
01:01
10:30
00:00

inválidas
24:59
30:01
00:60
05:122

Example

Answer 4

If you use Pablo’s library

   $("#hora").mask("AB:CD", {
        translation: {
          "A": { pattern: /[0-2]/, optional: false},
          "B": { pattern: /[0-3]/, optional: false},
          "C": { pattern: /[0-5]/, optional: false},
          "D": { pattern: /[0-9]/, optional: false}
        }
    });

Tested and working

Note: beware of commas and quotes in js

Answer 5

It is possible to use the jquery-Masked-input, changing the mask with the event onKeyPress, depending on whether the hours have a value equal to or greater than 20.

var mask = function (val) {
    val = val.split(":");
    return (parseInt(val[0]) > 19)? "HZ:M0" : "H0:M0";
}

pattern = {
    onKeyPress: function(val, e, field, options) {
        field.mask(mask.apply({}, arguments), options);
    },
    translation: {
        'H': { pattern: /[0-2]/, optional: false },
        'Z': { pattern: /[0-3]/, optional: false },
        'M': { pattern: /[0-5]/, optional: false }
    },
    placeholder: 'hh:mm'
};

$(document).ready(function () {
  $("#QuantidadeHoras").mask(mask, pattern);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.min.js"></script>

<input type="text" id="QuantidadeHoras" />

Answer 6

Leaving here for future reference.

This example uses the following library: https://github.com/igorescobar/jQuery-Mask-Plugin

In the examples above, we have problems with the codes that use this library in the form of problems when generating schedules started with '0', for example (06:30, 08:30), so let’s expand the code a little:

HTML:

<input type="text" id="hora" />

JS:

var SPMaskBehavior = function (val) {
  return val.replace(/\D/g, '')[0] === '2' ? 'AE:CD' : 'AB:CD';
},
spOptions = {
  onKeyPress: function(val, e, field, options) {
      field.mask(SPMaskBehavior.apply({}, arguments), options);
    },
    translation: {
       "A": { pattern: /[0-2]/, optional: false},
       "B": { pattern: /[0-9]/, optional: false},
       "C": { pattern: /[0-5]/, optional: false},
       "D": { pattern: /[0-9]/, optional: false},
       "E": { pattern: /[0-3]/, optional: false}
    }
};

$('#hora').mask(SPMaskBehavior, spOptions);

What the above code does is detect if the first digit of the time was '0' or '1' and in this case allows the second digit to be between '0' and '9'. If the first digit of the time is '2', only allow it to be continued by '0-3'. Minutes are no secret, they proceed in the same way.

JSFIDDLE: http://jsfiddle.net/9cvLzmfs/