Inputmask: Readonly fields prevent form from submitting via jQuery $("#form").submit();

[subarachnid]

In some forms I have to display readonly fields which also have a mask applied to them. This however prevents the form from being submitted via jQuery $("#form").submit(). I have no idea why this is happening and I'd really appreciate if someone could help me out with this...

Demo:

<h4>Won't submit (includes readonly field)</h4>
<form id="form" action="" method="POST">
    <input readonly type="text" name="test" data-inputmask="'alias' : 'decimal'" value="123">
</form>
<button id="send">send</button>

<h4>Works fine:</h4>
<form id="form2" action="" method="POST">
    <input type="text" name="test" data-inputmask="'alias' : 'decimal'" value="123">
</form>
<button id="send2">send</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/[email protected]/dist/jquery.inputmask.js"></script>

<script>
$('[data-inputmask]').inputmask();

$('#send').click(function() {
    $('#form').submit();
});

$('#send2').click(function() {
    $('#form2').submit();
});
</script>

Live Demo here: https://stackoverflow.com/questions/63623018/jquery-inputmask-plugin-prevents-form-from-submitting-when-a-masked-field-has-th

I think I narrowed the problem down to this piece of code in the inputmask plugin. It looks as if the default event (submit) is prevented in case the form has a readOnly field:

 var EventRuler = {
            on: function on(input, eventName, eventHandler) {
                var $ = input.inputmask.dependencyLib, ev = function ev(e) {
                    e.originalEvent && (e = e.originalEvent || e, arguments[0] = e);
                    var that = this, args, inputmask = that.inputmask, opts = inputmask ? inputmask.opts : void 0;
                    if (void 0 === inputmask && "FORM" !== this.nodeName) {
                        var imOpts = $.data(that, "_inputmask_opts");
                        $(that).off(), imOpts && new _inputmask.default(imOpts).mask(that);
                    } else {
                        if ("setvalue" === e.type || "FORM" === this.nodeName || !(that.disabled || that.readOnly && !("keydown" === e.type && e.ctrlKey && 67 === e.keyCode || !1 === opts.tabThrough && e.keyCode === _keycode.default.TAB))) {
                            switch (e.type) {
                                case "input":
                                    if (!0 === inputmask.skipInputEvent || e.inputType && "insertCompositionText" === e.inputType) return inputmask.skipInputEvent = !1,
                                        e.preventDefault();
                                    break;

                                case "keydown":
                                    inputmask.skipKeyPressEvent = !1, inputmask.skipInputEvent = inputmask.isComposing = e.keyCode === _keycode.default.KEY_229;
                                    break;

                                case "keyup":
                                case "compositionend":
                                    inputmask.isComposing && (inputmask.skipInputEvent = !1);
                                    break;

                                case "keypress":
                                    if (!0 === inputmask.skipKeyPressEvent) return e.preventDefault();
                                    inputmask.skipKeyPressEvent = !0;
                                    break;

                                case "click":
                                case "focus":
                                    return inputmask.validationEvent ? (inputmask.validationEvent = !1, input.blur(),
                                        (0, _inputHandling.HandleNativePlaceholder)(input, (inputmask.isRTL ? _positioning.getBufferTemplate.call(inputmask).slice().reverse() : _positioning.getBufferTemplate.call(inputmask)).join("")),
                                        setTimeout(function() {
                                            input.focus();
                                        }, 3e3)) : (args = arguments, setTimeout(function() {
                                        input.inputmask && eventHandler.apply(that, args);
                                    }, 0)), !1;
                            }
                            var returnVal = eventHandler.apply(that, arguments);
                            return !1 === returnVal && (e.preventDefault(), e.stopPropagation()), returnVal;
                        }
                        e.preventDefault();
                    }
                };
                input.inputmask.events[eventName] = input.inputmask.events[eventName] || [], input.inputmask.events[eventName].push(ev),
                    [ "submit", "reset" ].includes(eventName) ? null !== input.form && $(input.form).on(eventName, ev.bind(input)) : $(input).on(eventName, ev);
            },

[marcelolx]

I'm facing similar issue, with a rails project, where i'm have two masked disabled fields, and when the form is submited the field isn't passing this condition https://github.com/RobinHerbots/Inputmask/blob/5.x/dist/inputmask.js#L1471, as consequence preventDefault is called https://github.com/RobinHerbots/Inputmask/blob/5.x/dist/inputmask.js#L1505.

@RobinHerbots Can you take a look at this? If you need some sample project, I can provide it.

[bodelia]

https://github.com/RobinHerbots/Inputmask/issues/2382#issuecomment-692104243

Might help while @RobinHerbots is away

[RobinHerbots]

@subarachnid , @marcelolx ,

The issue is fixed in version 5.0.6-beta.15
Can you have a try.

[marcelolx]

@RobinHerbots I tested it here and is working as expected, thanks!

I will open another issue, but seems that in 5.0.6-beta.15 is some bug when using showMaskOnFocus: false, it's raising the error bellow and is not possible to fill the masked inputs properly.

[RobinHerbots]

@marcelolx ,

Yes that is a bug , .... this.inputmask.__valueGet should be this.__valueGet