0

У меня есть готовая форма для отправки сообщений на почту, вот сслка на github: валидация и отправка сообщений на почту Для валидации использую Старую версию валидации v 1.5 Помогите, пожалуйста, с валидацией полей. Проблема вот в чем:

  1. При валидации поля с именем строка 78 файла scripts.js не срабатывает. Там установлено ограничение для поля name в 7 символов, но валидация использует свои внутренние правила для минимального количества в 2 символа.
  2. Лог при валидации телефона не выдает лог из 85 строки файла scripts.js, хотя по идее должен печатать номер телефона без пробелов, дефисов и скобок
  3. Валидация телефона не происходит (строки 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');
4
  • ограничение для поля name в 7 символов, но валидация использует свои внутренние правила для минимального количества в 2 символа - на скрине введено 2 символа, что меньше 7. Так что условие пока работает.
    – DrMcSheen
    26 июл 2022 в 2:24
  • DrMcSheen, Потому что 2 < 3. А ограничение в три символа - это внутренние правила валидатора, мои правила не действуют
    – Ivan Main
    26 июл 2022 в 8:43
  • minLength: "Имя должно иметь более 3 символов" - вот это внутреннее правило?
    – DrMcSheen
    27 июл 2022 в 4:20
  • DrMcSheen, нет, это правило для вывода сообщений об ошибке. И для поля с именем я его успешно изменил, а правило для учета количества символов которые должны валидироваться действуют из библиотеки, а не мои.
    – Ivan Main
    27 июл 2022 в 12:41

1 ответ 1

0

74 строка файла script.js должна быть изменена на new JustValidate('.form', { Полностью код файла будет иметь вид

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: "Введите телефон",
    },
}

new JustValidate('.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');

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.