Kuidas lahendada WordPressi vormide JavaScripti märkeruudu valideerimisprobleeme

Kliendipoolne märkeruudu valideerimine JavaScripti abil kontaktivormis

See lähenemisviis kasutab WordPressi-põhises kontaktivormis esiotsa valideerimiseks vanilje JavaScripti. Eesmärk on tagada, et märkeruut oleks enne vormi esitamist märgitud.

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

PHP taustavalideerimine kontaktivormi märkeruudu jaoks

See tagalahendus tagab, et pärast vormi esitamist kinnitatakse PHP-s aktsepteerimise märkeruut. PHP-d kasutatakse kõigi sisendite puhastamiseks ja kinnitamiseks.

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

Korduma kippuvad küsimused märkeruutude kinnitamise kohta WordPressi vormides

1. Kuidas kontrollida, kas JavaScriptis on märgitud ruut?
2. Saate kontrollida, kas märkeruut on valitud, kasutades checked atribuut JavaScriptis. Näiteks: document.getElementById('acceptance').checked.
3. Mis on roll preventDefault() vormi kinnitamisel?
4. The preventDefault() meetod peatab vormi vaikimisi esitamise protsessi, võimaldades teil enne vormi saatmist teha kohandatud valideerimiskontrolle.
5. Kuidas PHP märkeruutude valideerimist käsitleb?
6. PHP-s saab märkeruutude valideerimist käsitleda kasutades isset() et kontrollida, kas märkeruut on valitud ja sanitize_text_field() sisendväärtuse puhastamiseks.
7. Mis on wp_mail() kasutatakse vormi esitamisel?
8. wp_mail() on WordPressi funktsioon, mida kasutatakse meiliteatiste saatmiseks pärast vormi edukat esitamist ja kinnitamist.
9. Miks peaksin kasutama nii esi- kui ka tagaotsa valideerimist?
10. Esiosa valideerimine parandab kasutajakogemust, pakkudes vahetut tagasisidet, samas kui taustavalideerimine tagab, et andmed on enne töötlemist turvalised ja korralikult desinfitseeritud.

Viimased mõtted märkeruudu kinnitamise kohta:

Hea kasutajakogemuse säilitamiseks on oluline tagada, et märkeruutude valideerimine toimiks õigesti nii JavaScriptis kui ka PHP-s. Korrektne esiotsa valideerimine hoiab ära vormide esitamise vead ja tagaplaani turvaline valideerimine hoiab andmeid manipuleerimise või valede sisestuste eest kaitstuna.

Kombineerides reaalajas tagasiside JavaScriptiga ja kasutades serveripoolsete kontrollide haldamiseks PHP-d, saate oma WordPressi vorme täiustada. See lähenemisviis tagab, et kõik väljad, sealhulgas märkeruut, on õigesti kinnitatud, vältides teie saiti kaitstes mittetäielike esitamiste esitamist.