У меня есть готовая форма для отправки сообщений на почту, вот сслка на github: валидация и отправка сообщений на почту Для валидации использую Старую версию валидации v 1.5 Помогите, пожалуйста, с валидацией полей. Проблема вот в чем:
- При валидации поля с именем строка 78 файла scripts.js не срабатывает. Там установлено ограничение для поля name в 7 символов, но валидация использует свои внутренние правила для минимального количества в 2 символа.
- Лог при валидации телефона не выдает лог из 85 строки файла scripts.js, хотя по идее должен печатать номер телефона без пробелов, дефисов и скобок
- Валидация телефона не происходит (строки 81-88 файла scripts.js). Я указал поле data-validate-field со значением tel и указал функцию, которая будет возвращать true для этого tel. Но это правило тоже не срабатывает.
Помогите, пожалуйста, решить 3 проблемы.
Код HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="mail.php" enctype="multipart/form-data" class="form" method="POST">
<input type="hidden" name="admin_email[]" value="any@mail.ru">
<input type="hidden" name="form_subject" value="Тема письма">
<h2>Отправка формы</h2>
<label class="form-label">
<span>Введите имя</span>
<input type="text" data-validate-field="name" name="name" required>
</label>
<label class="form-label">
<span>Введите телефон</span>
<input type="tel" data-validate-field="tel" name="tel" required>
</label>
<label class="form-label">
<span>Введите email</span>
<input type="email" data-validate-field="email" name="email" required>
</label>
<label class="form-label file-label">
<span>Прикрепить файл</span>
<input type="file" name="file[]" multiple>
</label>
<button type="submit">Отправить</button>
</form>
<script src="inputmask.min.js"></script>
<script src="just-validate.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Код файла script.js
let selector = document.querySelectorAll('input[type="tel"]');
let im = new Inputmask('+7 (999) 999-99-99');
im.mask(selector);
let selector2 = document.querySelector('input[type="tel"]');
selector2.addEventListener('input', function(){
console.log(selector2.value)
const re = /^\d*(\.\d+)?$/
console.log(selector2.value.match(/[0-9]/g).length)
console.log(selector2.value.replace(/[0-9]/g, "0"));
});
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (e) => {
let files = e.currentTarget.files;
console.log(files);
if (files.length) {
fileInput.closest('label').querySelector('span').textContent = files[0].name;
} else {
fileInput.closest('label').querySelector('span').textContent = 'Прикрепить файл';
}
});
let validateForms = function(selector, rules, messages, successModal, yaGoal) {
new window.JustValidate(selector, {
rules: rules,
messages: messages,
submitHandler: function(form) {
let formData = new FormData(form);
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('Отправлено');
}
}
}
xhr.open('POST', 'mail.php', true);
xhr.send(formData);
form.reset();
fileInput.closest('label').querySelector('span').textContent = 'Прикрепить файл';
}
});
}
// validateForms('.form', { email: {required: true, email: true}, tel: {required: true} }, '.thanks-popup', 'send goal');
let messages = {
name: {
required: "Вы не ввели имя",
minLength: "Имя должно иметь более 3 символов",
maxLength: "Имя должно быть менее 30 символов",
},
tel: {
required: "Неверный формат номера",
tel: "Введите телефон",
},
}
validateForms('.form', {
rules: {
name: {
required: true,
minLength: 7,
maxLength: 30,
},
tel: {
tel: true,
function: (name, value) => {
const phone = document.querySelector('input[type="tel"]').inputmask.unmaskedvalue()
console.log(phone)
return Number(phone) && phone.length === 10
}
},
email: {required: true, email: true},
},
}, messages, '.thanks-popup', 'send goal');
ограничение для поля name в 7 символов, но валидация использует свои внутренние правила для минимального количества в 2 символа
- на скрине введено 2 символа, что меньше 7. Так что условие пока работает.minLength: "Имя должно иметь более 3 символов"
- вот это внутреннее правило?