Kako rešiti težave s potrditvijo potrditvenega polja JavaScript za obrazce WordPress

Reševanje preverjanja potrditvenega polja v kontaktnih obrazcih po meri

Izdelava kontaktnega obrazca po meri v WordPressu je običajna naloga, vendar je zagotoviti, da so vsa polja pravilno potrjena, včasih lahko težavno. Ena pogosta težava vključuje preverjanje potrditvenih polj z uporabo JavaScripta. Če z njim ne ravnate pravilno, lahko povzroči nepopolne oddaje obrazcev ali nepotrebno razočaranje uporabnikov.

V tem članku bomo preučili težavo, pri kateri potrditveno polje ne uspe pravilno preveriti v obrazcu po meri WordPress. Ta težava ostaja kljub temu, da so druga polja uspešno preverjena. Težava nastane zaradi majhne napake v logiki preverjanja JavaScript.

Zadevni obrazec uporablja preverjanje JavaScript, da prepreči ponovno nalaganje strani med pošiljanjem. Čeprav so polja, kot so ime, telefonska številka in e-pošta, pravilno preverjena, se zdi, da potrditveni skript potrditvenega polja ne potrdi pravilno. Sprehodili se bomo skozi vključeno kodo JavaScript in PHP.

Na koncu tega vodnika boste razumeli, kako pravilno implementirati preverjanje potrditvenega polja z uporabo JavaScripta v okolju WordPress. Raziskali bomo tudi, kako težava vpliva na predložitev obrazcev, in ponudili rešitev, ki zagotavlja nemoteno uporabniško izkušnjo.

Podrobna razčlenitev preverjanja potrditvenega polja JavaScript in PHP

V prvem delu skripta se JavaScript uporablja za izvedbo preverjanja na strani odjemalca, da se zagotovi, da so polja obrazca, vključno s potrditvenim poljem, pravilno izpolnjena pred oddajo obrazca. Eden od ključnih ukazov, addEventListener(), se uporablja za pripenjanje dogodka 'klik' na gumb za oddajo. Ta metoda pomaga preprečiti privzeto oddajo obrazca in omogoča funkciji preverjanja po meri, da preveri vnose. Funkcija event.preventDefault() ustavi samodejno oddajo obrazca in ustavi ponovno nalaganje strani. Ta pristop je uporaben za preverjanje uporabniških vnosov, ne da bi morali po nepotrebnem pošiljati podatke strežniku.

Skript uporablja tudi preverjeno da posebej preverite, ali je potrditveno polje izbrano. Potrditveno polje ima ključno vlogo, saj se uporablja za potrditev soglasja uporabnika s pravilniki o zasebnosti, kar je obvezno v mnogih oblikah. Če potrditveno polje ni izbrano, se obrazec ne bo nadaljeval, sporočilo o napaki pa se prikaže z uporabo createElement() metoda za dinamično dodajanje sporočil o napakah v DOM. Ta funkcija zagotavlja, da lahko obrazec vizualno obvesti uporabnika o manjkajočem potrditvenem polju za sprejemanje, kar daje povratne informacije v realnem času brez ponovnega nalaganja strani.

V ozadju skript PHP dodatno potrdi obrazec, potem ko je predložen strežniku. Uporaba sanitize_text_field(), so vnosna polja prečiščena, da se prepreči posredovanje zlonamerne kode ali neustreznih podatkov v bazo podatkov. To zagotavlja, da so vsa besedilna polja, vključno s potrditvenim poljem, očiščena in varna za uporabo. V funkciji PHP, isset() se uporablja za preverjanje, ali je bilo potrditveno polje izbrano, in če ni, doda sporočilo o napaki, ki nakazuje, da se mora uporabnik strinjati s pogoji. Ta raven preverjanja veljavnosti doda dodatno raven varnosti z navzkrižnim preverjanjem, kaj je JavaScript že preveril na strani odjemalca.

Nazadnje, če so vse potrditve uspešne, obrazec pošlje e-pošto z uporabo wp_mail() funkcijo. Ta funkcija WordPress poenostavlja pošiljanje e-pošte s podatki o uporabniku skrbniku spletnega mesta. Če pride do napak pri preverjanju, PHP uporabi esc_html() za varen prikaz sporočil o napakah na obrazcu. To zlonamernim uporabnikom preprečuje vstavljanje škodljivih skriptov v obrazec, kar zagotavlja, da so vsa prikazana sporočila o napakah varna in prečiščena. S kombinacijo preverjanja tako na strani odjemalca kot na strani strežnika obrazec zagotavlja gladko uporabniško izkušnjo, hkrati pa ohranja visoko raven varnosti in preprečuje nepotrebne oddaje z manjkajočimi ali neveljavnimi podatki.

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

Izboljšanje tehnik preverjanja potrditvenega polja v obrazcih WordPress

Pri delu z obrazci po meri v WordPressu, zlasti pri uporabi JavaScripta za preverjanje veljavnosti, je bistvenega pomena pravilno ravnanje z različnimi vrstami vnosov, vključno s potrditvenimi polji. Preverjanje potrditvenega polja zagotavlja, da uporabniki izpolnjujejo določene pogoje, kot je sprejemanje pravilnikov o zasebnosti ali strinjanje s pogoji in določili. Brez preverjanja teh polj tvegate, da bodo uporabniki zaobšli pomembne zahteve, kar lahko vpliva na skladnost s pravnimi predpisi in interakcijo z uporabniki.

Eden od spregledanih vidikov potrjevanja potrditvenega polja je zagotavljanje, da sta preverjanja sprednjega in zadnjega dela usklajena. Medtem ko JavaScript obravnava preverjanje veljavnosti na strani odjemalca, je enako pomembno, da zaledje uporablja PHP za preverjanje podatkov, zlasti ko gre za občutljive informacije. Na primer z uporabo sanitize_text_field() in esc_html() v PHP doda še eno raven varnosti, tako da izloči neželene ali zlonamerne vnose. To zagotavlja, da se podatki pred obdelavo očistijo, tudi če uporabnik obide JavaScript.

Drug pomemben vidik preverjanja potrditvenega polja je uporabniška izkušnja. Preverjanje v realnem času z JavaScriptom zagotavlja takojšnjo povratno informacijo in uporabnikom prikaže, ko zahtevano potrditveno polje ni potrjeno. To lahko bistveno izboljša stopnjo oddaje obrazcev in zmanjša število napak. Implementacija dinamičnih sporočil o napakah, ki se prikažejo brez ponovnega nalaganja celotne strani, uporabnike obvešča in jim pomaga razumeti, kaj je treba popraviti. S kombiniranjem JavaScripta z ustreznim preverjanjem veljavnosti PHP ustvarite robusten, uporabniku prijazen obrazec, ki poveča varnost in izboljša splošno uporabniško izkušnjo.