Kako riješiti probleme s provjerom valjanosti okvira JavaScripta za WordPress obrasce

Rješavanje provjere potvrdnog okvira u prilagođenim obrascima za kontakt

Izrada prilagođenog obrasca za kontakt u WordPressu uobičajen je zadatak, ali osiguravanje da su sva polja ispravno provjerena ponekad može biti teško. Jedan uobičajeni problem uključuje provjeru potvrdnih okvira pomoću JavaScripta. Ako se ne postupa ispravno, može dovesti do nepotpunog slanja obrazaca ili nepotrebne frustracije korisnika.

U ovom ćemo članku razmotriti problem u kojem potvrdni okvir ne uspijeva pravilno potvrditi valjanost u WordPress prilagođenom obrascu. Ovaj problem i dalje postoji unatoč tome što su ostala polja uspješno provjerena. Problem nastaje zbog male pogreške u logici provjere valjanosti JavaScripta.

Predmetni obrazac koristi provjeru valjanosti JavaScripta kako bi spriječio ponovno učitavanje stranice tijekom slanja. Dok su polja poput imena, telefonskog broja i e-pošte ispravno provjeravana, čini se da skripta za provjeru ne provjerava ispravno potvrdni okvir. Proći ćemo kroz uključeni JavaScript i PHP kod.

Do kraja ovog vodiča shvatit ćete kako ispravno implementirati provjeru valjanosti potvrdnih okvira pomoću JavaScripta u okruženju WordPress. Također ćemo istražiti kako problem utječe na slanje obrazaca i pružiti rješenje koje osigurava glatko korisničko iskustvo.

Detaljna raščlamba JavaScript i PHP provjere okvira za potvrdu

U prvom dijelu skripte, JavaScript se koristi za provjeru valjanosti na strani klijenta kako bi se osiguralo da su polja obrasca, uključujući potvrdni okvir, ispravno ispunjena prije podnošenja obrasca. Jedna od ključnih naredbi, addEventListener(), koristi se za dodavanje događaja 'klik' gumbu za slanje. Ova metoda pomaže u sprječavanju slanja zadanog obrasca, dopuštajući prilagođenoj funkciji provjere valjanosti da provjeri unose. Funkcija event.preventDefault() zaustavlja automatsko podnošenje obrasca i zaustavlja ponovno učitavanje stranica. Ovaj pristup je koristan za provjeru valjanosti korisničkih unosa bez potrebe za nepotrebnim slanjem podataka na poslužitelj.

Skripta također koristi provjereno kako biste posebno provjerili je li potvrdni okvir odabran. Potvrdni okvir ima ključnu ulogu jer se koristi za potvrdu pristanka korisnika na pravila o privatnosti, što je obavezno u mnogim oblicima. Ako potvrdni okvir nije odabran, obrazac se neće nastaviti, a poruka o pogrešci se prikazuje pomoću stvoritiElement() metoda za dinamičko dodavanje poruka o pogreškama u DOM. Ova funkcija osigurava da obrazac može vizualno obavijestiti korisnika o nedostatku okvira za prihvaćanje, dajući povratne informacije u stvarnom vremenu bez ponovnog učitavanja stranice.

Na stražnjoj strani, PHP skripta dalje potvrđuje obrazac nakon što se pošalje na poslužitelj. Korištenje sanirati_tekstualno_polje(), polja za unos su sanirana kako bi se spriječilo prosljeđivanje zlonamjernog koda ili neispravnih podataka u bazu podataka. Time se osigurava da su sva tekstualna polja, uključujući potvrdni okvir, očišćena i sigurna za upotrebu. U PHP funkciji, isset() koristi se za provjeru je li potvrdni okvir odabran, a ako nije, dodaje poruku o pogrešci koja ukazuje na potrebu da se korisnik složi s uvjetima. Ova razina provjere dodaje dodatni sloj sigurnosti unakrsnom provjerom onoga što je JavaScript već provjerio na strani klijenta.

Konačno, ako sve provjere prođu, obrazac šalje e-poruku koristeći wp_mail() funkcija. Ova funkcija WordPressa pojednostavljuje slanje e-pošte s podacima o korisniku administratoru stranice. Ako postoje pogreške provjere valjanosti, PHP koristi esc_html() za siguran prikaz poruka o greškama na obrascu. Ovo sprječava zlonamjerne korisnike da umetnu štetne skripte u obrazac, osiguravajući da su sve prikazane poruke o pogrešci sigurne i pročišćene. Kombinirajući provjeru valjanosti na strani klijenta i na strani poslužitelja, obrazac osigurava nesmetano korisničko iskustvo uz održavanje visoke sigurnosti i sprječavanje nepotrebnih podnošenja s nedostajućim ili nevažećim podacima.

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

Poboljšanje tehnika provjere valjanosti okvira za potvrdu u WordPress obrascima

Kada radite s prilagođenim obrascima u WordPressu, posebno kada koristite JavaScript za provjeru valjanosti, bitno je pravilno rukovati različitim vrstama unosa, uključujući potvrdne okvire. Provjera potvrdnog okvira osigurava da se korisnici pridržavaju određenih uvjeta, kao što je prihvaćanje pravila o privatnosti ili slaganje s odredbama i uvjetima. Bez provjere valjanosti ovih polja riskirate da korisnici zaobiđu važne zahtjeve, što može utjecati i na usklađenost s zakonima i na interakciju s korisnikom.

Jedan zanemaren aspekt provjere valjanosti potvrdnog okvira je osiguranje da su front-end i back-end validacije usklađene. Dok JavaScript obrađuje provjeru valjanosti na strani klijenta, jednako je važno da back-end koristi PHP za provjeru valjanosti podataka, posebno kada se radi s osjetljivim informacijama. Na primjer, koristeći sanirati_tekstualno_polje() i esc_html() u PHP-u dodaje još jedan sloj sigurnosti uklanjanjem neželjenih ili zlonamjernih unosa. To osigurava da se podaci dezinficiraju prije obrade, čak i ako korisnik zaobiđe JavaScript.

Drugi važan aspekt provjere potvrdnog okvira je korisničko iskustvo. Provjera valjanosti u stvarnom vremenu s JavaScriptom pruža neposrednu povratnu informaciju, pokazujući korisnicima kada traženi potvrdni okvir nije označen. Ovo može značajno poboljšati stope podnošenja obrazaca i smanjiti pogreške. Implementacija dinamičkih poruka o pogreškama, koje se pojavljuju bez ponovnog učitavanja cijele stranice, informira korisnike i pomaže im razumjeti što treba ispraviti. Kombinacijom JavaScripta s pravilnom provjerom valjanosti PHP-a, stvarate robustan, korisniku prilagođen obrazac koji povećava sigurnost i poboljšava cjelokupno korisničko iskustvo.