Контроль проверки Asp.Net конфликтует с функцией JavaScript только в MS Edge - PullRequest
Новая
       31

Контроль проверки Asp.Net конфликтует с функцией JavaScript только в MS Edge

0 голосов
/ 08 ноября 2018

У меня есть пользовательский элемент управления, который используется внутри формы. Элемент управления содержит два стандартных элемента проверки Asp.Net.

Вот фрагмент кода - как вы можете видеть, есть обязательный валидатор поля и валидатор регулярного выражения: 

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

Я подтверждаю номер телефона - само текстовое поле также ограничивает количество символов до 11, что является максимальным размером номера в Великобритании.

Вот пример регулярного выражения:

^0[12]\d{8,9}$ - домашний телефон

Я также пытаюсь замаскировать ввод, удаляя пробелы с помощью функции javascript - запускаемой классом, помеченным как «no-space» в текстовом поле. 

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

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

Это работает гармонично во всех браузерах, кроме MS Edge.

В Edge он нарушает проверку Asp.Net - валидатор не включается - в основном он блокирует всю форму, потому что это обязательное поле.

Дело в том, что я не получаю никаких ошибок, так что кроме полного удаления класса и добавления подсказки, чтобы пользователь не знал, вводить пробелы, я не уверен, что еще я могу сделать.

Есть идеи - либо решить проблему, либо, возможно, лучше обойти эту проблему?

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

Вы можете просто запретить нажатие клавиши «пробел» в текстовых полях input type=tel. 

$('input[type=tel]').keydown(function (e) {
    return (e.keyCode !== 32);
});
0 голосов
/ 08 ноября 2018

Я бы разрешил больше символов и использовал бы регулярное выражение для очистки поля, когда фокус изменился от этого конкретного поля ввода. То, как вы очистите это с помощью регулярных выражений, будет зависеть от ваших ожиданий от пользователя. Если вы уверены, что пользователи будут вводить только британские номера, вы можете просто заменить все нецифровые символы. Я не работаю в JQ, но это ванильный JS 

    <input id="phone">

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