Функция валидация и отправки формы работает некорректно, не могу найти ошибку, что подскажете?

Question

[zhelonkinalex]

есть прописанный скрипт с валидацией и отправкой формы на сервер:

Код JavaScript

let form = document.querySelector('.breef__form'),
    formInputs = document.querySelectorAll('.js-input'),
    formTextarea = document.querySelectorAll('.js-textarea'),
    inputEmail = document.querySelector('.js-input-email'),
    inputPhone = document.querySelector('.js-input-phone');

    function validateEmail(email) {
        let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    }
    function validatePhone(phone) {
        let re = /^[0-9\s]*$/;
        return re.test(String(phone));
    }

    form.onsubmit = function () { 
   
        let emailVal = inputEmail.value,
            phoneVal = inputPhone.value;
            emptyInputs = Array.from(formInputs).filter(input => input.value === '');
            emptyTextarea = Array.from(formTextarea).filter(textarea => textarea.value === '');


        formInputs.forEach(function (input) {
            if (input.value === '' ) {
                input.classList.add('error');
                
        
            } else {
                input.classList.remove('error');
            }
        });

        formTextarea.forEach(function (textarea) {
            if (textarea.value === '' ) {
                textarea.classList.add('error');
                
        
            } else {
                textarea.classList.remove('error');
                
            }
        });

        if (!validatePhone(phoneVal)) {
            alert('Недопустимый телефон');
            inputPhone.classList.add('error');
            return false;
        } else {
            inputPhone.classList.remove('error');
        }
        if (emptyInputs.length !== 0) {
            alert('Заполните все поля');
            return false;

        }
        if(emptyTextarea.length !== 0) {
            alert('Заполните все поля');
            return false;
        }
        if(!validateEmail(emailVal)) {
            alert('Недопустимый Email');
            inputEmail.classList.add('error');
            return false;
        } else {
            inputEmail.classList.remove('error');
        }
       
   
        
        
 
    }
    

    function fileValidation() {
        let fileInput =
            document.getElementById('breefattach');
         
        let filePath = fileInput.value;
     
        // Allowing file type
        let allowedExtensions =
/(\.jpg|\.txt|\.pdf|\.word|\.png)$/i;
         
        if (!allowedExtensions.exec(filePath)) {
            alert('Недопустимый тип файла');
            fileInput.value = '';
            return false;
        }
       
       
      
    }


    form.onsubmit = async (e) =>{
        e.preventDefault(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', 'formsend.php', true);
            xhr.send(formData);

            form.reset();
            alert('Ваша форма отправлена, мы скоро с вами свяжемся, спасибо!');
            
            
            
    };

В таком состоянии не работает валидация, при нажатии на кнопку "отправить" срабатывает только последняя функция (form.onsubmit = async (e)), в консоле появляется

POST http://127.0.0.1:5500/formsend.php 405 (Method Not Allowed)

, как и положено, потому что сайт не на хостинге, открыт через локальный хост. Если убрать последнюю функцию (form.onsubmit = async (e)), валидация начинает работать, но срабатывает стандартный экшен, который указан в теле формы, со ссылкой на php файл, что, конечно, нас не устраивает. Подскажите, что нужно исправить, чтобы работала валидация, отправлялась форма, без перезагрузки страницы и как было задумано, форма просто очищалась?

Comments

[Юрий Матрос]

вы перезаписываете функцию form.onsubmit дважды, первый раз с функцией валидации и второй раз с функцией отправки формы на сервер. Когда вы это делаете второй раз, оно перезаписывает первую функцию, и поэтому валидация не работает.