jQuery Inputmask Plugin prevents form from submitting when a masked field has the "readonly" attribute

Question

I am using this jQuery Plugin https://github.com/RobinHerbots/Inputmask to enable inputfield masking.

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'd really appreciate if someone could help me out with this...

$('[data-inputmask]').inputmask();

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/jquery.inputmask@5.0.6-beta.12/dist/jquery.inputmask.js"></script>

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

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

Edit: I would like to know if this is a bug, or if I'm doing something wrong.

I have had the same problem, but it also happens without using jQuery.submit() for me — user883992158, May 14 '21 at 20:34

score 4 · Accepted Answer · answered Sep 07 '20 at 07:35

So, after spending hours i found out for you this is definitely as bug hence why you are experiencing this issue. I will be raising a github issue for this bug or if you want to do it let me know.

If you have a form which includes any disabled or readonly fields you can use this script CDN version of inputmask There is no difference between 4.0 and 5.0 version all the features are same. All yours forms will be submitted normally with all input mask working.

Live Working Demo:

$('[data-inputmask]').inputmask();

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

$('#send2').click(function() {
  $('#form2').submit();
});

$('#send3').click(function() {
  $('#form2').submit();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/4.x/dist/jquery.inputmask.bundle.js"></script>

<h4>Will 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>Will submit (includes disabled field)</h4>
<form id="form" action="" method="POST">
    <input disabled  type="text" name="test" data-inputmask="'alias' : 'decimal'" value="123">
</form>
<button id="send3">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>

score 4 · Answer 2 · answered Sep 17 '20 at 16:55

4

For anyone that still experiences this problem: The issue was fixed in version 5.0.6-beta.15.

answered Sep 17 '20 at 16:55

Đinh Carabus

3,403
4
22
44

score 1 · Answer 3 · answered Sep 01 '20 at 20:57

1

On pressing the button just remove the readonly attribute

     $("#send").click(function (e) {
          $("[data-inputmask]").removeAttr("readonly");
          $("#form").submit();
        });

Shown to be working here https://codesandbox.io/s/ecstatic-minsky-dp7ej?file=/index.html:1101-1237

answered Sep 01 '20 at 20:57

Ramakay

2,919
1
5
21

Thanks for your answer but this kind of lazy hack can not be the solution to the problem. I would like to know if this is a bug in the inputmask library or if I am doing something wrong in using it. – Đinh Carabus Sep 01 '20 at 21:00
I guess I could have asked the question more specifically. – Đinh Carabus Sep 01 '20 at 21:18
Original question: ".This however prevents the form from being submitted via jQuery $("#form").submit(). I'd really appreciate if someone could help me out with this..." The github readme / issue you & others posted has no response for the preventDefault, blame => https://github.com/RobinHerbots/Inputmask/blame/5.x/lib/eventruler.js The "lazy hack" solves your issue, in the absence of reasoning, you can fork or work around the issue. One thing you should wonder is why an entire form with a single readonly input would need to be submitted - Add a "continue" link Best of luck! – Ramakay Sep 01 '20 at 21:19
This was just an example form to illustrate the problem. The actual forms contain a lot more fields. Thanks for your help. – Đinh Carabus Sep 01 '20 at 21:21
If they are all readonly, the user has no input - So use a simple button to forward them,. If they are a mix of readonly and editable fields and you wish to use this library, the "hack" lets you proceed - I cannot see a reasoning why they add it. – Ramakay Sep 01 '20 at 21:23

jQuery Inputmask Plugin prevents form from submitting when a masked field has the "readonly" attribute

3 Answers3