Доброго времени суток!
Вопрос состоит из двух частей:
- 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">×</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');
}
}
};
};
Пробовал писать валидацию в саму маску, но тоже ничего не получилось.
Помогите разобраться.
Заранее спасибо.