كيفية حل مشكلات التحقق من صحة مربع اختيار JavaScript لنماذج WordPress

التحقق من صحة مربع الاختيار من جانب العميل باستخدام JavaScript في نموذج الاتصال

يستخدم هذا الأسلوب JavaScript الفانيليا للتحقق من صحة الواجهة الأمامية في نموذج اتصال يستند إلى WordPress. الهدف هو التأكد من تحديد مربع الاختيار قبل إرسال النموذج.

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 التحقق من صحة النهاية الخلفية لمربع الاختيار في نموذج الاتصال

يضمن هذا الحل الخلفي التحقق من صحة مربع اختيار القبول في PHP بعد إرسال النموذج. يتم استخدام لغة PHP لتعقيم جميع المدخلات والتحقق من صحتها.

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

الأسئلة المتداولة حول التحقق من صحة خانة الاختيار في نماذج WordPress

1. كيف يمكنني التحقق من تحديد خانة الاختيار في JavaScript؟
2. يمكنك التحقق من تحديد خانة الاختيار باستخدام checked الملكية في جافا سكريبت. على سبيل المثال: document.getElementById('acceptance').checked.
3. ما هو دور preventDefault() في التحقق من صحة النموذج؟
4. ال preventDefault() تقوم هذه الطريقة بإيقاف عملية الإرسال الافتراضية للنموذج، مما يسمح لك بإجراء عمليات تحقق مخصصة من الصحة قبل إرسال النموذج.
5. كيف تتعامل PHP مع التحقق من صحة مربع الاختيار؟
6. في PHP، يمكن التعامل مع التحقق من صحة مربع الاختيار باستخدام isset() للتحقق مما إذا تم تحديد خانة الاختيار و sanitize_text_field() لتنظيف قيمة الإدخال.
7. ما هو wp_mail() تستخدم في عمليات تقديم النموذج؟
8. wp_mail() هي إحدى وظائف WordPress المستخدمة لإرسال إشعارات البريد الإلكتروني بعد إرسال النموذج والتحقق من صحته بنجاح.
9. لماذا يجب علي استخدام كل من التحقق من صحة الواجهة الأمامية والخلفية؟
10. يعمل التحقق من صحة الواجهة الأمامية على تحسين تجربة المستخدم من خلال توفير تعليقات فورية، بينما يضمن التحقق من صحة الواجهة الخلفية بقاء البيانات آمنة ومعقمة بشكل صحيح قبل معالجتها.

الأفكار النهائية حول التحقق من صحة خانة الاختيار:

يعد التأكد من أن التحقق من صحة مربع الاختيار يعمل بشكل صحيح في كل من JavaScript وPHP أمرًا ضروريًا للحفاظ على تجربة مستخدم جيدة. يمنع التحقق من صحة الواجهة الأمامية حدوث أخطاء في إرسال النموذج، ويحافظ التحقق من صحة الواجهة الخلفية الآمنة على البيانات في مأمن من التلاعب أو المدخلات غير الصحيحة.

من خلال الجمع بين التعليقات في الوقت الفعلي مع JavaScript واستخدام PHP للتعامل مع عمليات التحقق من جانب الخادم، يمكنك تحسين نماذج WordPress الخاصة بك. يضمن هذا الأسلوب التحقق من صحة جميع الحقول، بما في ذلك مربع الاختيار، بشكل صحيح، مما يمنع عمليات الإرسال غير المكتملة مع حماية موقعك.