submit не активна если номер не равен маски
есть форма
<head>
</script>
<script src="js/mask.js"></script>
<script src="js/mask_list.js"></script>
</head>
<form class="pay_form" action="">
<input class="phone" type="text" name="phone" value="" placeholder="Phone">
<button class="pay_btn btn" type="submit">Submit</button>
</form>
<script>
mask(".phone");
</script>
и задана маска ввода номера телефона (mask.js
)
const mask = (selector) => {
function setMask() {
let matrix = '+###############';
maskList.forEach(item => {
let code = item.code.replace(/[\s#]/g, ''),
phone = this.value.replace(/[\s#-)(]/g, '');
if (phone.includes(code)) {
console.log(phone, code);
matrix = item.code;
}
});
let i = 0,
val = this.value.replace(/\D/g, '');
this.value = matrix.replace(/(?!\+)./g, function(a) {
return /[#\d]/.test(a) && i < val.length ? val.charAt(i++) : i >= val.length ? '' : a;
});
}
let inputs = document.querySelectorAll(selector);
inputs.forEach(input => {
if (!input.value) input.value = '';
input.addEventListener('input', setMask);
input.addEventListener('focus', setMask);
input.addEventListener('blur', setMask);
});
};
и маски телефонов (mask_list.js
)
const maskList = [{
"code": "+247 ####"
},
......
но есть нюанс если просто оставить плюс или набрать короткий номер (кривой), который не соответствует маски, то кнопка submit
активна.
Соответственно как сделать так, чтобы, когда номер телефона не совпадает маски, то есть набран криво, то кнопка submit
неактивна
Все библиотеки брал отсюда https://github.com/liggth/inputmask-phones?tab=readme-ov-file
Источник: Stack Overflow на русском