Cara Menyelesaikan Masalah Pengesahan Kotak Semak JavaScript untuk Borang WordPress

Menyelesaikan Pengesahan Kotak Semak dalam Borang Hubungan Tersuai

Membina borang hubungan tersuai dalam WordPress adalah tugas biasa, tetapi memastikan semua medan disahkan dengan betul kadangkala boleh menjadi rumit. Satu isu biasa melibatkan pengesahan kotak pilihan menggunakan JavaScript. Jika tidak dikendalikan dengan betul, ia boleh menyebabkan penyerahan borang yang tidak lengkap atau kekecewaan pengguna yang tidak perlu.

Dalam artikel ini, kami akan melihat isu di mana kotak pilihan gagal untuk mengesahkan dengan betul dalam bentuk tersuai WordPress. Masalah ini berterusan walaupun medan lain berjaya disahkan. Masalahnya timbul daripada kesilapan kecil dalam logik pengesahan JavaScript.

Borang yang dimaksudkan menggunakan pengesahan JavaScript untuk menghalang muat semula halaman semasa penyerahan. Walaupun medan seperti nama, nombor telefon dan e-mel disahkan dengan betul, kotak semak nampaknya tidak disemak dengan betul oleh skrip pengesahan. Kami akan melihat kod JavaScript dan PHP yang terlibat.

Pada penghujung panduan ini, anda akan memahami cara melaksanakan pengesahan kotak semak dengan betul menggunakan JavaScript dalam persekitaran WordPress. Kami juga akan meneroka cara isu itu mempengaruhi penyerahan borang dan menyediakan penyelesaian yang memastikan pengalaman pengguna yang lancar.

Pecahan Terperinci JavaScript dan Pengesahan Kotak Semak PHP

Dalam bahagian pertama skrip, JavaScript digunakan untuk melaksanakan pengesahan pihak klien untuk memastikan bahawa medan borang, termasuk kotak semak, diisi dengan betul sebelum menyerahkan borang. Salah satu arahan utama, addEventListener(), digunakan untuk melampirkan acara 'klik' pada butang hantar. Kaedah ini membantu menghalang penyerahan borang lalai, membenarkan fungsi pengesahan tersuai menyemak input. Fungsi event.preventDefault() menghentikan penyerahan borang automatik dan menghentikan muat semula halaman. Pendekatan ini berguna untuk mengesahkan input pengguna tanpa perlu menghantar data ke pelayan secara tidak perlu.

Skrip juga menggunakan diperiksa untuk mengesahkan secara khusus sama ada kotak semak dipilih. Kotak semak memainkan peranan penting kerana ia digunakan untuk mengesahkan persetujuan pengguna terhadap dasar privasi, yang wajib dalam pelbagai bentuk. Jika kotak semak tidak dipilih, borang tidak akan diteruskan dan mesej ralat dipaparkan menggunakan createElement() kaedah untuk menambahkan mesej ralat secara dinamik pada DOM. Fungsi ini memastikan bahawa borang boleh memberitahu pengguna secara visual tentang kotak pilihan penerimaan yang hilang, memberikan maklum balas masa nyata tanpa memuatkan semula halaman.

Pada bahagian belakang, skrip PHP mengesahkan lagi borang selepas ia diserahkan kepada pelayan. menggunakan sanitize_text_field(), medan input dibersihkan untuk mengelakkan kod berniat jahat atau data yang tidak betul daripada dihantar ke dalam pangkalan data. Ini memastikan bahawa semua medan teks, termasuk kotak semak, dibersihkan dan selamat untuk digunakan. Dalam fungsi PHP, isset() digunakan untuk menyemak sama ada kotak semak telah dipilih, dan jika tidak, ia menambah mesej ralat yang menunjukkan keperluan untuk pengguna bersetuju dengan terma. Tahap pengesahan ini menambah lapisan keselamatan tambahan dengan mengesahkan silang perkara yang telah disemak oleh JavaScript pada sisi klien.

Akhir sekali, jika semua pengesahan lulus, borang menghantar e-mel menggunakan wp_mail() fungsi. Fungsi WordPress ini memudahkan penghantaran e-mel dengan butiran pengguna kepada pentadbir tapak. Jika terdapat ralat pengesahan, PHP menggunakan esc_html() untuk memaparkan mesej ralat pada borang dengan selamat. Ini menghalang pengguna berniat jahat daripada memasukkan skrip berbahaya ke dalam borang, memastikan bahawa sebarang mesej ralat yang dipaparkan adalah selamat dan dibersihkan. Dengan menggabungkan kedua-dua pengesahan sisi klien dan sisi pelayan, borang ini memastikan pengalaman pengguna yang lancar sambil mengekalkan keselamatan yang tinggi dan menghalang penyerahan yang tidak perlu dengan data yang hilang atau tidak sah.

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

Mempertingkatkan Teknik Pengesahan Kotak Semak dalam Borang WordPress

Apabila berurusan dengan borang tersuai dalam WordPress, terutamanya apabila menggunakan JavaScript untuk pengesahan, adalah penting untuk mengendalikan pelbagai jenis input dengan betul, termasuk kotak pilihan. Pengesahan kotak semak memastikan pengguna mematuhi syarat tertentu, seperti menerima dasar privasi atau bersetuju menerima terma dan syarat. Tanpa mengesahkan medan ini, anda berisiko pengguna memintas keperluan penting, yang boleh menjejaskan pematuhan undang-undang dan interaksi pengguna.

Satu aspek pengesahan kotak pilihan yang diabaikan ialah memastikan kedua-dua pengesahan bahagian hadapan dan bahagian belakang diselaraskan. Walaupun JavaScript mengendalikan pengesahan sisi klien, adalah sama pentingnya bahawa bahagian belakang menggunakan PHP untuk mengesahkan data, terutamanya apabila berurusan dengan maklumat sensitif. Sebagai contoh, menggunakan sanitize_text_field() dan esc_html() dalam PHP menambah satu lagi lapisan keselamatan dengan menanggalkan input yang tidak diingini atau berniat jahat. Ini memastikan bahawa walaupun pengguna memintas JavaScript, data itu dibersihkan sebelum diproses.

Satu lagi aspek penting dalam pengesahan kotak semak ialah pengalaman pengguna. Pengesahan masa nyata dengan JavaScript memberikan maklum balas segera, menunjukkan kepada pengguna apabila kotak pilihan yang diperlukan dinyahtandai. Ini boleh meningkatkan kadar penyerahan borang dengan ketara dan mengurangkan ralat. Melaksanakan mesej ralat dinamik, yang muncul tanpa muat semula halaman penuh, memastikan pengguna dimaklumkan dan membantu mereka memahami perkara yang perlu diperbetulkan. Dengan menggabungkan JavaScript dengan pengesahan PHP yang betul, anda mencipta bentuk yang teguh dan mesra pengguna yang meningkatkan keselamatan dan meningkatkan keseluruhan pengalaman pengguna.