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 양식을 개선할 수 있습니다. 이 접근 방식을 사용하면 확인란을 포함한 모든 필드의 유효성이 올바르게 검사되어 사이트를 보호하는 동시에 불완전한 제출을 방지할 수 있습니다.