javascript – JS Mask for Time Validation

Question:

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

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

The <input> only lets me fill the field with numbers, but I can enter 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 type of fill?

Answer:

I had to put it in a pastebin because it won't 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 3.x I couldn't make it work.

Scroll to Top