Validation of Time

Question

Guys I’m doing an hour validation on Javascript. I can’t type the following hours 14:00, 15:00, 16:00 until 20:00, but other hours I can get.

I’m doing like this:

var mask = "HH:MM",
    pattern = {
        'translation': {
            'H': {
                pattern: /[0-23]/
            },
            'M': {
                pattern: /[0-59]/
            }
        }
    };
$("#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 1

/[0-23]/ that is to say 0, 1, 2, or 3.

And the same applies to the second case, [0-59] means of 0 to 5, or 9.

---

Instead, use this other:

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}
    }
};

$('#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 2

I had to adjust the Pattern to work the mask, for some reason the plugin only recognized the first number as an integral part of the mask, follows how I solved.

var mask = "JG:MM",
    pattern = {
        'translation': {
            'J': {
                pattern: /[0-2]/
            },
            'G': {
                pattern: /[0-9]/
            },
            'M': {
                pattern: /[0-59]/
            }
        }
    };

$("#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" />