如何解决 WordPress 表单的 JavaScript 复选框验证问题

在联系表单中使用 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 JavaScript 中的属性。例如： 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 表单。此方法可确保正确验证所有字段（包括复选框），防止提交不完整，同时保护您的网站。