Блог

Предполагается, что это обрабатывает проверку формы для простой контактной формы с именем, адресом электронной почты, URL-адресом веб-сайта и разделом комментариев из 10 строк для описания проекта, затем передает информацию в виде объекта JSON в файл php для отправки на указанный адрес электронной почты.

Когда у меня был action="emailprocessor.php HTML-код, проверка формы проходила через файл PHP, а не JS, и он правильно отправлялся на указанный адрес электронной почты.

Без действия в html оно должно проходить через JS, а затем на PHP. Он этого не делает.

Вот мой код:

 (function () {

    "use strict";

    const contactForm = document.getElementById('contactform');
    contactForm.addEventListener('submit', validateForm);

    //Messages to be put in the message element when there is an error or success...
    // The last element in this array loads the preloader css.
    const feedBackMessage = [

        '<div class="error"><h3>Ooops!</h3><p>The name field is reqired, that's how I know who you are. Please fix that and try again!</p></div>',
        '<div class="error"><h3>Ooops!</h3><p>You forgot to give me a valid email address. Please fix that and try again!</p></div>',
        '<div class="error"><h3>Ooops!</h3><p>You forgot to enter your website. Please fix that and try again!</p></div>',
        '<div class="error"><h3>Ooops!</h3><p>Please enter your project description or comment.</p></div>',
        '<div class="success"><h3>Thank you!</h3><p>Your information has been sent, and we will be in touch.</p></div>',
        '<div class="preloader"><div class="loading-dot"></div></div>'

    ];

    // The actual form validation function. Added url regex.    
    function validateForm(event) {
        event.preventDefault();

        const nameField = document.getElementById('name');
        const emailField = document.getElementById('email');
        const siteField = document.getElementById('website');
        const commentField = document.getElementById('comment');
        
        const reName = /^[a-zA-Z] ((['- ][a-zA-Z])?[a-zA-Z]*)*$/;
        const reEmail = /^[A-Za-z0-9](([_.-]?[a-zA-Z0-9] )*)@([A-Za-z0-9] )(([.-]?[a-zA-Z0-9] )*).([A-Za-z]{2,})$/;
        const reUrl = /^([a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?.) [a-zA-Z]{2,6}$/;

        let errors = 0;

        if (!reName.test(nameField.value)) {
            displayMessage(nameField, feedBackMessage[0]);
            errors  ;
        }

        else if (!reEmail.test(emailField.value)) {
            displayMessage(emailField, feedBackMessage[1]);
            errors  ;
        }

        else if (!reUrl.test(siteField.value)) {
            displayMessage(siteField, feedBackMessage[2]);
            errors  ;
        }

        else if (commentField.value == "") {
            displayMessage(commentField, feedBackMessage[3]);
            errors  ;
        }

        else if (errors === 0) {
            sendData();
        }
    }

    // This displays error / success messages
    
    function displayMessage(field, message) {
        document.getElementById('message').className = "show-message";
        document.getElementById('message').innerHTML = message;
        setTimeout(function () {
            document.getElementById('message').classList.add("fadeOutElement");
            setTimeout(function () {
                if  (field != 'success') {
                    document.getElementById('message').className = "hide-message";
                    document.getElementById(field.id).focus();
                }
                
                else {
                    document.getElementById('message').setAttribute("class", "hide-message");
                    document.getElementById('name').value = '';
                    document.getElementById('email').value = '';
                    document.getElementById('website').value = '';
                    document.getElementById('comment').value = '';
                }
            }, 2000);
        }, 2000);
        //puts messages in the DOM??
    }

    function sendData() {
        document.getElementById('message').className = "show-message";
        document.getElementById('message').innerHTML = feedBackMessage[5];
        setTimeout(async () => {
                const formdata = new FormData(contactForm);
                const fetchPromise = await fetch('emailprocessor.php', { method: 'POST', body: formdata });
                const data = await fetchPromise.json();
                console.log(data.result);
                if (data.result == "success") {
                    displayMessage('success', feedBackMessage[4]);
                }
            }, 2000);
    }   
        //actually sends the data asynchronously or so it claims
});