4

I am trying to use the jQuery Mask Plugin by Igor Escobar for time validation:

$("input").mask("Hh:Mm",{
    translation: {
      'H': { pattern: /[0-2]/ },
      'h': { pattern: /[0-9]/ },
      'M': { pattern: /[0-5]/ },
      'm': { pattern: /[0-9]/ }
    }
});

In this solution it is possible to input not valid time like 26:53. I also can't use am or pm, only 24h format. The pattern seems to work only for one symbol. How can I use it for more characters? Something like this ([01]?[0-9]|2[0-3])

I also try to validate value after input: 

$("input").each(function() {
    el = $(this);
    el.mask("Hh:Mm", {
        onComplete: function(cep) {
            if (!/^([01]?[0-9]|2[0-3]):[0-5][0-9]$/.test(cep)) {
                alert('Error');
                el.attr("value","");
            }
        },
        translation: {
            'H': { pattern: /[0-2]/ },
            'h': { pattern: /[0-9]/ },
            'M': { pattern: /[0-5]/ },
            'm': { pattern: /[0-9]/ }
        }
    });
});

This solution is not so good because I still allow the user to type something wrong. How can I fix this?

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
eurocups
  • 51
  • 1
  • 4

2 Answers2

12

I found a solution to this problem using a function mask

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

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

    $('.daytimemask').mask(maskBehavior, spOptions);

this seems to work fine, but it's necessary to add the left zero on hours before "12".

I hope this helps.

alejosr
  • 131
  • 2
  • 4
0
                    var maskBehavior = function (val) {
                        val = val.split(":");
                        return (parseInt(val[0]) > 19) ? "HZ:M0" : "H0:M0";
                    },spOptions = {
                        onKeyPress: function (val, e, field, options) {
                            if (val.length == 1 && parseInt(val) > 2) {
                                val = pad$(val, 2);
                                arguments[0] = val;
                                field.val(val);
                            } else if (val.length > 3) {
                                val = val.split(":");
                                if (parseInt(val[1]) > 5) {
                                    val = val[0] + ':' + pad$(val[1], 2);
                                    arguments[0] = val;
                                    field.val(val);
                                };
                            };
                            field.mask(maskBehavior.apply({}, arguments), options);
                        },
                        translation: {
                            'H': { pattern: /[0-9]/, optional: false },
                            'Z': { pattern: /[0-3]/, optional: false },
                            'M': { pattern: /[0-9]/, optional: false }
                        }
                    };
Hòa Thái
  • 1