Asp.Net Validation control conflicts with javascript function in MS Edge only

Question

I have a user control that is used inside a form. The control contains two standard Asp.Net validation controls.

Here's the code snippet - as you can see there is a required field validator and a regular expression validator:

<asp:Panel ID="pnlInputControl" runat="server" CssClass="input-control">
    <div class="input-wrapper input-text half-width">
        <asp:TextBox ID="tbInput" runat="server"
            CssClass="no-space"
            MaxLength="11"
            type="tel">
        </asp:TextBox>
    </div>
    <asp:RequiredFieldValidator ID="rfvInput" runat="server"
        ControlToValidate="tbInput"
        Display="Dynamic"
        SetFocusOnError="True"
        CssClass="validator">
    </asp:RequiredFieldValidator>
    <asp:RegularExpressionValidator ID="revInput" runat="server"
        ControlToValidate="tbInput"
        Display="Dynamic"
        SetFocusOnError="True"
        CssClass="validator">
    </asp:RegularExpressionValidator>
</asp:Panel>

I validate a telephone number - the text box itself also restricts the number of characters to 11 which is the max size of a UK number.

Here's a sample regular expression:

^0[12]\d{8,9}$ - home phone number

I also try to mask the input, removing spaces with a javascript function - triggered by the class labelled "no-space" on the textbox.

$("body").on("input", "input.no-space", removeSpace);

function removeSpace() {
        $(this).val(function (_, v) {
            return v.replace(/\s+/g, '');
        });
    }

This works in harmony, on all browsers but MS Edge.

On Edge, it breaks the Asp.Net validation - the validator doesn't kick in - basically it locks the entire form because it is a required field.

The thing is I don't get any errors, so aside from removing the class completely and adding a hint to let the user know not to enter spaces, I'm not sure what else I can do.

Any ideas - either to go about fixing the problem or perhaps a better workaround?

Answer 1

I would allow more characters and use a regex to clean up the field when the focus changes from that specific input field. How you clean that up with regex would depend on what your expectations are from a user. If you are confident that users will only be entering UK numbers--you could just replace all non-digit chars. I do not work in JQ, but this is the vanilla JS

    <input id="phone">

    document.getElementById("phone").addEventListener("blur", phoneCleanup);
    function phoneCleanup() {
        var phone = this.value;
        this.value = phone.replace(/\D+/g, '');         
    }

Answer 2

You can simply disallow the "space" key to be pressed in the input type=tel textboxes.

$('input[type=tel]').keydown(function (e) {
    return (e.keyCode !== 32);
});