Kaip išspręsti „JavaScript“ žymimojo laukelio patvirtinimo problemas „WordPress“ formoms

Žymimojo laukelio patvirtinimo sprendimas tinkintose kontaktų formose

Sukurti tinkintą kontaktinę formą „WordPress“ yra įprasta užduotis, tačiau užtikrinti, kad visi laukai būtų tinkamai patvirtinti, kartais gali būti sudėtinga. Viena dažna problema yra žymimųjų laukelių patvirtinimas naudojant „JavaScript“. Jei netinkamai elgiamasi, gali būti pateiktos neužbaigtos formos arba bereikalingas vartotojo nusivylimas.

Šiame straipsnyje išnagrinėsime problemą, kai nepavyksta tinkamai patvirtinti žymės langelio „WordPress“ tinkintoje formoje. Ši problema išlieka, nepaisant to, kad kiti laukai buvo sėkmingai patvirtinti. Problema kyla dėl nedidelės klaidos JavaScript patvirtinimo logikoje.

Aptariamoje formoje naudojamas „JavaScript“ patvirtinimas, kad puslapis nebūtų įkeltas iš naujo pateikiant. Nors laukai, pvz., vardas, telefono numeris ir el. pašto adresas, patvirtinami teisingai, tikrinimo scenarijus, atrodo, nėra tinkamai patikrintas. Apžvelgsime susijusius JavaScript ir PHP kodus.

Šio vadovo pabaigoje suprasite, kaip teisingai įdiegti žymimąjį laukelį naudojant JavaScript WordPress aplinkoje. Taip pat išnagrinėsime, kaip problema paveikia formų pateikimą, ir pateiksime sprendimą, užtikrinantį sklandžią naudotojo patirtį.

Išsamus „JavaScript“ ir PHP žymimojo laukelio patvirtinimo suskirstymas

Pirmoje scenarijaus dalyje JavaScript naudojamas kliento pusės patvirtinimui atlikti, siekiant užtikrinti, kad formos laukai, įskaitant žymimąjį laukelį, būtų teisingai užpildyti prieš pateikiant formą. Viena iš pagrindinių komandų, addEventListener(), naudojamas „spustelėjimo“ įvykiui pridėti prie mygtuko pateikti. Šis metodas padeda išvengti numatytojo formos pateikimo, leidžiant pasirinktinei patvirtinimo funkcijai patikrinti įvestis. Funkcija event.preventDefault() sustabdo automatinį formos pateikimą ir sustabdo puslapio įkėlimą iš naujo. Šis metodas yra naudingas norint patvirtinti vartotojo įvestį, be reikalo nesiunčiant duomenų į serverį.

Scenarijus taip pat naudojamas patikrinta norėdami konkrečiai patikrinti, ar žymimasis laukelis pažymėtas. Žymimasis laukelis atlieka labai svarbų vaidmenį, nes jis naudojamas patvirtinti vartotojo sutikimą su privatumo politika, kuri daugeliu formų yra privaloma. Jei žymimasis laukelis nepažymėtas, forma nebus tęsiama ir bus rodomas klaidos pranešimas naudojant sukurti elementą () būdas dinamiškai įtraukti klaidų pranešimus į DOM. Ši funkcija užtikrina, kad forma gali vizualiai informuoti vartotoją apie trūkstamą priėmimo žymimąjį laukelį, pateikdama grįžtamąjį ryšį realiuoju laiku neperkraunant puslapio.

Užpakalinėje programoje PHP scenarijus toliau patvirtina formą po to, kai ji pateikiama serveriui. Naudojant sanitize_text_field(), įvesties laukai yra išvalyti, kad į duomenų bazę nebūtų perduotas kenkėjiškas kodas arba netinkami duomenys. Taip užtikrinama, kad visi teksto laukai, įskaitant žymimąjį laukelį, būtų išvalyti ir saugūs naudoti. PHP funkcijoje isset () naudojamas patikrinti, ar žymimasis laukelis buvo pažymėtas, o jei ne, jis prideda klaidos pranešimą, nurodantį, kad vartotojas turi sutikti su sąlygomis. Šis patvirtinimo lygis suteikia papildomo saugumo lygio kryžminiu patikrinimu, ką „JavaScript“ jau patikrino kliento pusėje.

Galiausiai, jei visi patvirtinimai praeina, forma išsiunčia el. laišką naudodama wp_mail() funkcija. Ši „WordPress“ funkcija supaprastina el. laiško su vartotojo informacija siuntimą svetainės administratoriui. Jei yra patvirtinimo klaidų, PHP naudoja esc_html() kad formoje būtų saugiai rodomi klaidų pranešimai. Tai apsaugo nuo kenkėjiškų vartotojų į formą įterpti žalingų scenarijų, užtikrinant, kad visi rodomi klaidų pranešimai būtų saugūs ir išvalyti. Derinant kliento ir serverio patvirtinimą, forma užtikrina sklandžią vartotojo patirtį, išlaikant aukštą saugumą ir užkertant kelią nereikalingiems pateikimams su trūkstamais arba neteisingais duomenimis.

const contactFormSubmit = document.getElementById('contact-form-submit');
if (contactFormSubmit) {
    contactFormSubmit.addEventListener('click', validateForm);
}

function validateForm(event) {
    event.preventDefault();
    const firstname = document.getElementById('firstname').value.trim();
    const surname = document.getElementById('surname').value.trim();
    const phone = document.getElementById('phone').value.trim();
    const email = document.getElementById('email').value.trim();
    const acceptance = document.getElementById('acceptance').checked;
    let validationMessages = [];

    if (firstname === '') { validationMessages.push('Please enter your name.'); }
    if (surname === '') { validationMessages.push('Please enter your surname.'); }
    if (phone === '') { validationMessages.push('Please enter your phone number.'); }
    if (!emailIsValid(email)) { validationMessages.push('Please enter a valid email.'); }
    if (!acceptance) { validationMessages.push('Please check the acceptance box.'); }

    if (validationMessages.length === 0) {
        document.getElementById('contact-form').submit();
    } else {
        displayValidationMessages(validationMessages);
    }
}

function emailIsValid(email) {
    const regex = /\S+@\S+\.\S+/;
    return regex.test(email);
}

function displayValidationMessages(messages) {
    const container = document.getElementById('validation-messages-container');
    container.innerHTML = '';
    messages.forEach(message => {
        const div = document.createElement('div');
        div.classList.add('validation-message');
        div.textContent = message;
        container.appendChild(div);
    });
}

function site_contact_form() {
    $validation_messages = [];
    $success_message = '';

    if (isset($_POST['contact_form'])) {
        $firstname = sanitize_text_field($_POST['firstname'] ?? '');
        $surname = sanitize_text_field($_POST['surname'] ?? '');
        $email = sanitize_email($_POST['email'] ?? '');
        $phone = sanitize_text_field($_POST['phone'] ?? '');
        $acceptance = isset($_POST['acceptance']) ? 'Yes' : ''; // Checking checkbox

        if (empty($firstname)) { $validation_messages[] = 'Please enter your name.'; }
        if (empty($surname)) { $validation_messages[] = 'Please enter your surname.'; }
        if (!is_email($email)) { $validation_messages[] = 'Please enter a valid email.'; }
        if (empty($phone)) { $validation_messages[] = 'Please enter your phone number.'; }
        if (empty($acceptance)) { $validation_messages[] = 'Please check the acceptance box.'; }

        if (empty($validation_messages)) {
            wp_mail('admin@example.com', 'New Contact Message', 'Message from ' . $firstname);
            $success_message = 'Your message has been successfully sent.';
        }
    }

    // Displaying messages
    foreach ($validation_messages as $message) {
        echo '<div class="error-message">' . esc_html($message) . '</div>';
    }
    if (!empty($success_message)) {
        echo '<div class="success-message">' . esc_html($success_message) . '</div>';
    }
}

Žymimojo laukelio patvirtinimo metodų tobulinimas „WordPress“ formose

Kai naudojate pasirinktines „WordPress“ formas, ypač naudojant „JavaScript“ patvirtinimui, labai svarbu tinkamai tvarkyti įvairių tipų įvestis, įskaitant žymimuosius laukelius. Žymėjimo laukelio patvirtinimas užtikrina, kad vartotojai laikytųsi konkrečių sąlygų, pvz., sutinka su privatumo politika arba sutinka su taisyklėmis ir nuostatomis. Nepatvirtindami šių laukų rizikuojate, kad vartotojai nepaisys svarbių reikalavimų, o tai gali turėti įtakos ir teisiniam atitikimui, ir naudotojo sąveikai.

Vienas nepastebėtas žymimojo laukelio tikrinimo aspektas yra užtikrinti, kad ir priekinės, ir galinės dalies patvirtinimai būtų suderinti. Nors „JavaScript“ tvarko kliento patvirtinimą, taip pat svarbu, kad duomenims patvirtinti naudotų PHP, ypač kai dirbama su neskelbtina informacija. Pavyzdžiui, naudojant sanitize_text_field() ir esc_html() PHP prideda dar vieną saugumo sluoksnį, pašalindama nepageidaujamą ar kenkėjišką įvestį. Tai užtikrina, kad net jei vartotojas apeina „JavaScript“, prieš apdorojant duomenys bus išvalyti.

Kitas svarbus žymės langelio tikrinimo aspektas yra vartotojo patirtis. Tikrinimas realiuoju laiku naudojant „JavaScript“ suteikia tiesioginį grįžtamąjį ryšį, rodydamas naudotojams, kai nepažymėtas reikalingas žymimasis laukelis. Tai gali žymiai pagerinti formų pateikimo rodiklius ir sumažinti klaidų skaičių. Įdiegę dinaminius klaidų pranešimus, kurie rodomi neįkėlus viso puslapio iš naujo, naudotojai yra informuojami ir padeda suprasti, ką reikia taisyti. Sujungę JavaScript su tinkamu PHP patvirtinimu, sukuriate tvirtą, patogią formą, kuri padidina saugumą ir pagerina bendrą vartotojo patirtį.