submit не активна, если номер не равен маске

Question

есть форма

<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

БЛОГ НА HUSL

submit не активна, если номер не равен маске

Ответы (0 шт):