Your Location is: Home > Jquery

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

From: Bucharest View: 1436 dinh carabus 

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/[email protected]/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.

Best answer

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>

Another answer

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

Another answer

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