IMask и валидация формы на JavaScript

Question

Доброго времени суток!

Вопрос состоит из двух частей:

1) На сайте есть 2 формы: первая в модальном окне, вторая - на главной странице. Структура форм одинакова. Применяю Imask для шапки номера телефона, но он применяется только к input в первой форме. Как применить маску к обоим формам, не используя разные id для input?

<!--форма в модалке-->

<div id="modalForm" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h3>Text</h3>
      <span class="closeModal">&times;</span>
    </div>
    <div class="modal-body">
      <p>text</p>
      <form novalidate id="callbackForm1" class="callbackForm" method="POST" role="form" onsubmit="sendForm(this.id, 'submit-form.php'); event.preventDefault();">
        <input type="text" class="phone" name="phone" placeholder="Введите ваш телефон" autofocus>
        <button class="button-submit" name="send" type="submit" value="Вызвать замерщика"></button>
        <input type="hidden" name="formData" value="">
        <span class="error" aria-live="polite"></span>
      </form>
    </div>
  </div>
</div>

<!--форма на странице-->

<form novalidate id="callbackForm2" class="callbackForm" method="POST" role="form" onsubmit="sendForm(this.id, 'submit-form.php'); event.preventDefault();">
  <input type="text" class="phone" name="phone" placeholder="Введите ваш телефон" autofocus>
  <button class="button-submit" name="send" type="submit" value="push me"></button>
  <input type="hidden" name="formData" value="">
  <span class="error" aria-live="polite"></span>
</form>

<!--Imask-->

<script src="https://unpkg.com/imask"></script>
<script>
  let element = document.querySelector('input[class="phone"]');
  let maskOptions = {
    mask: '+{7}(000)000-00-00'
  };
  let mask = IMask(element, maskOptions);
</script>

2) Не могу понять где и как описать валидацию на количество вводимых знаков номера телефона. Пробовал по разному, но ничего не смог добиться. Вот сам скрипт оправки форм:

let sendForm = function(formId, url) {
  let form = document.getElementById(formId);
  let formData = new FormData(form);
  let xhr = new XMLHttpRequest();

  xhr.open("POST", url, true);
  xhr.send(formData);

  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        alert("Worked!");
      } else {
        alert(xhr.status + ': ' + xhr.statusText + 'Error');
      }
    }
  };
};

Пробовал писать валидацию в саму маску, но тоже ничего не получилось.

Помогите разобраться.

Заранее спасибо.

Answer 1

Для того, чтобы применить маску ко всем элементам - используйте querySelectorAll(получает все элементы) и перебор кнопок вместо querySelector(получает первый найденный элемент)
Пример:

    let element = document.querySelectorAll('input[class="phone"]');
    let maskOptions = {
        mask: '+{7}(000)000-00-00'
    };
    for (let i = 0; i < element.length; i++){
        let mask = IMask(element[i], maskOptions);
    }

<div id="modalForm" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Text</h3>
            <span class="closeModal">&times;</span>
        </div>
        <div class="modal-body">
            <p>text</p>
            <form novalidate id="callbackForm1" class="callbackForm" method="POST" role="form" onsubmit="sendForm(this.id, 'submit-form.php'); event.preventDefault();">
                <input type="text" class="phone" name="phone" placeholder="Введите ваш телефон" autofocus>
                <button class="button-submit" name="send" type="submit" value="Вызвать замерщика"></button>
                <input type="hidden" name="formData" value="">
                <span class="error" aria-live="polite"></span>
            </form>
        </div>
    </div>
</div>

<!--форма на странице-->

<form novalidate id="callbackForm2" class="callbackForm" method="POST" role="form" onsubmit="sendForm(this.id, 'submit-form.php'); event.preventDefault();">
    <input type="text" class="phone" name="phone" placeholder="Введите ваш телефон" autofocus>
    <button class="button-submit" name="send" type="submit" value="push me"></button>
    <input type="hidden" name="formData" value="">
    <span class="error" aria-live="polite"></span>
</form>

<!--Imask-->

<script src="https://unpkg.com/imask"></script>

Что касается второго вопроса - вот пример с комментариями:

    let element = document.querySelectorAll('input[class="phone"]');
    let maskOptions = {
        mask: '+{7}(000)000-00-00'
    };
    for (let i = 0; i < element.length; i++){
        let mask = IMask(element[i], maskOptions);
    }

    let sendForm = function(formId, url) {
        let form = document.getElementById(formId);
        let long = form.querySelector('.phone').value; // Ищем в родителе формы поле с классом phone и получаем его значение
        if (long.length > 15){
            console.log('Поле полностью заполнено');
        } else {
            console.log('Поле заполнено не полностью');
        }
        
        let formData = new FormData(form);

        let xhr = new XMLHttpRequest();

        xhr.open("POST", url, true);
        xhr.send(formData);

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    alert("Worked!");
                } else {
                    alert(xhr.status + ': ' + xhr.statusText + 'Error');
                }
            }
        };
    };

<div id="modalForm" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Text</h3>
            <span class="closeModal">&times;</span>
        </div>
        <div class="modal-body">
            <p>text</p>
            <form novalidate id="callbackForm1" class="callbackForm" method="POST" role="form" onsubmit="sendForm(this.id, 'submit-form.php'); event.preventDefault();">
                <input type="text" class="phone" name="phone" placeholder="Введите ваш телефон" autofocus>
                <button class="button-submit" name="send" type="submit" value="Вызвать замерщика"></button>
                <input type="hidden" name="formData" value="">
                <span class="error" aria-live="polite"></span>
            </form>
        </div>
    </div>
</div>

<!--форма на странице-->

<form novalidate id="callbackForm2" class="callbackForm" method="POST" role="form" onsubmit="sendForm(this.id, 'submit-form.php'); event.preventDefault();">
    <input type="text" class="phone" name="phone" placeholder="Введите ваш телефон" autofocus>
    <button class="button-submit" name="send" type="submit" value="push me"></button>
    <input type="hidden" name="formData" value="">
    <span class="error" aria-live="polite"></span>
</form>

<!--Imask-->

<script src="https://unpkg.com/imask"></script>

Answer 2

Для более тонкой настройки и ухода от опечатки клиентом, можно добавить все телефонные коды своей страны.

В приведенном примере коды для Украины. Еще +1 в к тому, что телефон будет введен верный.

В этом случае часть кода \\0 отвечает чтобы выводился всегда символ 0, так как по умолчанию библиотека 0 преобразует в правило (любая цифра).

document.querySelectorAll('.phone-mask') && document.querySelectorAll('.phone-mask').forEach(elem => IMask(elem, {
    mask: `+{38}(\\0code)000-00-00`,
    blocks: {
      code: {
        mask: IMask.MaskedEnum,
        enum: [
          '22','31','32','33','34','35','36','37','38','39','41','42','43','44','46','47','48','49','50','51','52','53','54','55','56','57','58','59','61','62','63','64','65','66','67','68','69','91','92','93','94','95','96','97','98','99',
        ]
      }
    }
  }))

Соответственно HTML код выглядит сл. образом

<input class="phone-mask"
       type="tel"
       name="telephone_1"
       value=""
       placeholder="">
<input class="phone-mask"
       type="tel"
       name="telephone_1"
       value=""
       placeholder="">
<input class="phone-mask"
       type="tel"
       name="telephone_1"
       value=""
       placeholder="">

В любом количестве, так как у нас цикл собирает все с классом phone-mask

БЛОГ НА HUSL

IMask и валидация формы на JavaScript

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