Проверка длины замаскированного поля ввода
У меня есть следующее замаскированное поле:
<input id = "phone1" placeholder = "(___) ___-____"/>
Маскировка делается так:
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>
<script>
$("#phone1").inputmask({ "mask": "(999) 999-9999" });
</script>
Я хочу выполнить проверку длины поля телефона. Поле телефона должно быть длиной ровно 10 символов или при маскированном вводе оно должно быть длиной 14 символов. Я не хочу выполнять проверку кнопки отправки, но я хочу выполнить проверку длины поля телефона «onfocusout» или когда кто-то выходит из поля. Я просто хочу отобразить сообщение под полем телефона о том, что «это поле должно быть длиной 10 символов», если кто-то вводит менее 10 символов. Эта маскировка не позволяет пользователю ввести более 10 символов. Это поле телефона не является обязательным.
любая помощь будет высоко оценена.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Просто определите проверку для события .keyup, поэтому, если есть какая-либо ошибка проверки, она будет отображаться, когда пользователь печатает. Используйте .replace(/\D/g,''), чтобы удалить нечисловую строку.
$(".phone").inputmask({ "mask": "(999) 999-9999" }).keyup((e) => {
if (e.target) {
let value = e.target.value.replace(/\D/g,'');
if (value.length < 10) {
$(e.target).next(".error").html('this field should be 10 characters long');
} else {
$(e.target).next(".error").html('');
}
}
});.error {
color: red;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>
<input id = "phone1" class = "phone" placeholder = "(___) ___-____"/>
<div class = "error"></div>
<input id = "phone2" class = "phone" placeholder = "(___) ___-____"/>
<div class = "error"></div>
<input id = "phone3" class = "phone" placeholder = "(___) ___-____"/>
<div class = "error"></div>@rimi, вы можете добавить одно и то же имя класса ко всем входным данным, например <input class = "phone-mask" name = "phone"> <input class = "phone-mask" name = "cell_phone">, и использовать его, как $(".phone-mask").inputmask({ "mask": "(999) 999-9999" }).keyup((e) => {
@ Джорди, зачем использовать let id = e.target.id.split('phone')[1]; ? ? когда у вас есть класс, вы можете просто использовать $(e.target).next(".error").html('this field should be 10 characters long');
@Jordy, хотя ошибка отображается. Я все еще могу отправить форму, если не введу все 10 номеров в поле телефона. Есть ли способ предотвратить отправку формы, если не введены все 10 символов поля телефона. Телефон не является обязательным полем, но если пользователь начинает печатать и не вводит все 10 номеров, отправка должна быть запрещена.
это работает как шарм. У меня есть несколько телефонных полей, таких как сотовый телефон, домашний телефон, рабочий телефон. Можете ли вы изменить приведенный выше сценарий, чтобы разместить все поля телефона, или это невозможно, и мне нужно написать один и тот же JavaScript для каждого поля телефона.