WordPress フォームの JavaScript チェックボックス検証の問題を解決する方法

お問い合わせフォームで JavaScript を使用したクライアント側のチェックボックス検証

このアプローチでは、WordPress ベースのお問い合わせフォームのフロントエンド検証にバニラ JavaScript を使用します。目的は、フォームを送信する前にチェックボックスがオンになっていることを確認することです。

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 フォームを改善できます。このアプローチにより、チェックボックスを含むすべてのフィールドが正しく検証され、サイトを保護しながら不完全な送信を防ぐことができます。