Validation of Time

Asked

Viewed 1,012 times

4

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" />

  • Which library(s) you are using for mask and validation(s)?

  • First of all this 0-23 regex does not understand it to be from 0 to 23, but from 0 to 2, which is why regex 0 2 is part of the "range" that Voce specified in the list. Your regex would match numbers from 0 to 2 followed by 3

2 answers

4


/[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" />

0

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" />

  • 1

    I made a test here and I managed to put 25:00.

  • As @Marconi noted, besides the time that will accept 24,25,26,27,28 and 29, the minutes will not work well, for the same reason of the comment I asked in the question, as it seems the number 17 is not in its range, that goes from 0 to 5 or 9.

  • I suggest you use a timepicker plugin, or use the HTML5 team field itself

  • I really made a mistake, you are right, I remove the answer? It is to be done with regex, I will do us, I return... rs

  • @Ruggi you can edit by matching the answer. :)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.