Kā atrisināt JavaScript izvēles rūtiņas validācijas problēmas WordPress veidlapām

Izvēles rūtiņas validācijas atrisināšana pielāgotajās kontaktu veidlapās

Pielāgotas saziņas veidlapas izveide pakalpojumā WordPress ir izplatīts uzdevums, taču dažkārt var būt sarežģīti nodrošināt, lai visi lauki būtu pareizi apstiprināti. Viena izplatīta problēma ir izvēles rūtiņu apstiprināšana, izmantojot JavaScript. Ja tas netiek pareizi apstrādāts, tas var izraisīt nepilnīgu veidlapu iesniegšanu vai nevajadzīgu lietotāju neapmierinātību.

Šajā rakstā mēs apskatīsim problēmu, kuras dēļ WordPress pielāgotajā veidlapā neizdodas pareizi pārbaudīt izvēles rūtiņu. Šī problēma joprojām pastāv, neskatoties uz to, ka citi lauki ir veiksmīgi apstiprināti. Problēma rodas nelielas JavaScript validācijas loģikas kļūdas dēļ.

Attiecīgā veidlapa izmanto JavaScript validāciju, lai novērstu lapas atkārtotu ielādi iesniegšanas laikā. Lai gan lauki, piemēram, vārds, tālruņa numurs un e-pasts, ir pārbaudīti pareizi, šķiet, ka validācijas skripts nav pareizi atzīmējis izvēles rūtiņu. Mēs apskatīsim iesaistīto JavaScript un PHP kodu.

Šīs rokasgrāmatas beigās jūs sapratīsit, kā pareizi ieviest izvēles rūtiņu validāciju, izmantojot JavaScript WordPress vidē. Mēs arī izpētīsim, kā problēma ietekmē veidlapu iesniegšanu, un nodrošināsim risinājumu, kas nodrošina vienmērīgu lietotāja pieredzi.

JavaScript un PHP izvēles rūtiņas detalizēts sadalījums

Skripta pirmajā daļā JavaScript tiek izmantots, lai veiktu klienta puses validāciju, lai nodrošinātu, ka veidlapas lauki, tostarp izvēles rūtiņa, ir pareizi aizpildīti pirms veidlapas iesniegšanas. Viena no galvenajām komandām, addEventListener(), tiek izmantots, lai pievienotu “klikšķa” notikumu iesniegšanas pogai. Šī metode palīdz novērst noklusējuma veidlapas iesniegšanu, ļaujot pielāgotajai validācijas funkcijai pārbaudīt ievades. Funkcija event.preventDefault() aptur automātisko veidlapu iesniegšanu un aptur lapas atkārtotu ielādi. Šī pieeja ir noderīga, lai pārbaudītu lietotāja ievadītos datus bez nepieciešamības sūtīt datus uz serveri.

Skripts arī izmanto pārbaudīts lai īpaši pārbaudītu, vai izvēles rūtiņa ir atlasīta. Izvēles rūtiņai ir izšķiroša nozīme, jo tā tiek izmantota, lai apstiprinātu lietotāja piekrišanu privātuma politikām, kas daudzos veidos ir obligāta. Ja izvēles rūtiņa nav atzīmēta, veidlapa netiks turpināta un tiek parādīts kļūdas ziņojums, izmantojot CreateElement() metode, lai dinamiski pievienotu kļūdu ziņojumus DOM. Šī funkcija nodrošina, ka forma var vizuāli informēt lietotāju par trūkstošo akcepta izvēles rūtiņu, sniedzot reāllaika atgriezenisko saiti, nepārlādējot lapu.

Aizmugursistēmā PHP skripts vēl vairāk apstiprina veidlapu pēc tam, kad tā ir iesniegta serverim. Izmantojot sanitize_text_field(), ievades lauki tiek dezinficēti, lai novērstu ļaunprātīga koda vai nepareizu datu nokļūšanu datu bāzē. Tas nodrošina, ka visi teksta lauki, tostarp izvēles rūtiņa, ir notīrīti un droši lietošanai. PHP funkcijā isset() tiek izmantots, lai pārbaudītu, vai izvēles rūtiņa ir atzīmēta, un, ja nē, tas pievieno kļūdas ziņojumu, kas norāda, ka lietotājam ir jāpiekrīt noteikumiem. Šis validācijas līmenis pievieno papildu drošības līmeni, pārbaudot to, ko JavaScript jau ir pārbaudījis klienta pusē.

Visbeidzot, ja visas validācijas iziet, veidlapa nosūta e-pastu, izmantojot wp_mail() funkciju. Šī WordPress funkcija vienkāršo e-pasta ar lietotāja informāciju nosūtīšanu vietnes administratoram. Ja ir validācijas kļūdas, PHP izmanto esc_html() lai veidlapā droši parādītu kļūdu ziņojumus. Tas neļauj ļaunprātīgiem lietotājiem ievietot veidlapā kaitīgus skriptus, nodrošinot, ka visi parādītie kļūdu ziņojumi ir droši un notīrīti. Apvienojot gan klienta, gan servera puses validāciju, veidlapa nodrošina vienmērīgu lietotāja pieredzi, vienlaikus saglabājot augstu drošību un novēršot nevajadzīgas iesniegšanas ar trūkstošiem vai nederīgiem datiem.

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>';
    }
}

Izvēles rūtiņas validācijas metožu uzlabošana WordPress veidlapās

Strādājot ar pielāgotajām veidlapām pakalpojumā WordPress, it īpaši, ja validācijai izmantojat JavaScript, ir svarīgi pareizi apstrādāt dažāda veida ievades, tostarp izvēles rūtiņas. Izvēles rūtiņas validācija nodrošina, ka lietotāji ievēro īpašus nosacījumus, piemēram, piekrīt konfidencialitātes politikām vai piekrīt noteikumiem un nosacījumiem. Nepārbaudot šos laukus, jūs riskējat, ka lietotāji apies svarīgas prasības, kas var ietekmēt gan juridisko atbilstību, gan lietotāja mijiedarbību.

Viens no izvēles rūtiņas validācijas ignorētajiem aspektiem ir nodrošināt, lai gan priekšgala, gan aizmugures validācijas būtu saskaņotas. Lai gan JavaScript apstrādā klienta puses validāciju, ir vienlīdz svarīgi, lai aizmugursistēma izmantotu PHP datu validēšanai, īpaši, ja tiek izmantota sensitīva informācija. Piemēram, izmantojot sanitize_text_field() un esc_html() PHP papildina vēl vienu drošības līmeni, novēršot nevēlamu vai ļaunprātīgu ievadi. Tas nodrošina, ka pat tad, ja lietotājs apiet JavaScript, dati tiek dezinficēti pirms apstrādes.

Vēl viens svarīgs izvēles rūtiņas validācijas aspekts ir lietotāja pieredze. Validācija reāllaikā, izmantojot JavaScript, nodrošina tūlītēju atgriezenisko saiti, parādot lietotājiem, kad vajadzīgā izvēles rūtiņa nav atzīmēta. Tas var ievērojami uzlabot veidlapu iesniegšanas ātrumu un samazināt kļūdu skaitu. Ieviešot dinamiskus kļūdu ziņojumus, kas parādās bez pilnas lapas atkārtotas ielādes, lietotāji tiek informēti un palīdz saprast, kas ir jālabo. Apvienojot JavaScript ar pareizu PHP validāciju, jūs izveidojat stabilu, lietotājam draudzīgu formu, kas uzlabo drošību un uzlabo vispārējo lietotāja pieredzi.