Com resoldre problemes de validació de caselles de verificació de JavaScript per a formularis de WordPress

Resolució de la validació de caselles de verificació en formularis de contacte personalitzats

Crear un formulari de contacte personalitzat a WordPress és una tasca habitual, però assegurar-se que tots els camps estiguin validats correctament pot ser complicat de vegades. Un problema comú consisteix a validar les caselles de selecció mitjançant JavaScript. Si no es gestiona correctament, pot provocar l'enviament de formularis incomplets o una frustració innecessària de l'usuari.

En aquest article, analitzarem un problema en què una casella de selecció no es valida correctament en un formulari personalitzat de WordPress. Aquest problema persisteix malgrat que els altres camps s'han validat correctament. El problema sorgeix d'un petit error en la lògica de validació de JavaScript.

El formulari en qüestió utilitza la validació de JavaScript per evitar que es recarreguin les pàgines durant l'enviament. Tot i que camps com el nom, el número de telèfon i el correu electrònic estan validats correctament, l'script de validació no sembla que la casella de selecció no estigui marcada correctament. Passarem pel codi JavaScript i PHP implicats.

Al final d'aquesta guia, entendràs com implementar correctament la validació de caselles de verificació mitjançant JavaScript en un entorn de WordPress. També explorarem com afecta el problema als enviaments de formularis i oferirem una solució que garanteixi una experiència d'usuari fluida.

Desglossament detallat de la validació de la casilla de verificació de JavaScript i PHP

A la primera part de l'script, JavaScript s'utilitza per realitzar la validació del client per assegurar-se que els camps del formulari, inclosa la casella de selecció, s'omplen correctament abans d'enviar el formulari. Un dels comandaments clau, addEventListener(), s'utilitza per adjuntar un esdeveniment "clic" al botó d'enviament. Aquest mètode ajuda a prevenir l'enviament del formulari predeterminat, permetent que la funció de validació personalitzada comprove les entrades. La funció event.preventDefault() atura l'enviament automàtic del formulari i atura les recàrregues de la pàgina. Aquest enfocament és útil per validar les entrades de l'usuari sense haver d'enviar dades al servidor innecessàriament.

El guió també utilitza comprovat per verificar específicament si la casella de selecció està seleccionada. La casella de selecció té un paper crucial, ja que s'utilitza per confirmar el consentiment de l'usuari a les polítiques de privadesa, que és obligatòria en moltes formes. Si la casella de selecció no està seleccionada, el formulari no continuarà i es mostrarà un missatge d'error utilitzant el createElement() mètode per afegir dinàmicament els missatges d'error al DOM. Aquesta funció garanteix que el formulari pugui notificar visualment a l'usuari la casella de selecció d'acceptació que falta, donant comentaris en temps real sense tornar a carregar la pàgina.

Al backend, l'script PHP valida encara més el formulari després d'enviar-lo al servidor. Utilitzant sanitize_text_field(), els camps d'entrada es desinfecten per evitar que es passin codis maliciosos o dades inadequades a la base de dades. Això garanteix que tots els camps de text, inclosa la casella de selecció, estiguin nets i segurs per al seu ús. A la funció PHP, isset() s'utilitza per comprovar si la casella de selecció està seleccionada i, si no, afegeix un missatge d'error que indica la necessitat que l'usuari accepti els termes. Aquest nivell de validació afegeix una capa addicional de seguretat mitjançant la verificació creuada del que JavaScript ja ha comprovat al costat del client.

Finalment, si totes les validacions passen, el formulari envia un correu electrònic mitjançant el wp_mail() funció. Aquesta funció de WordPress simplifica l'enviament d'un correu electrònic amb les dades de l'usuari a l'administrador del lloc. Si hi ha errors de validació, utilitza PHP esc_html() per mostrar de manera segura els missatges d'error al formulari. Això evita que els usuaris maliciosos insereixin scripts nocius al formulari, assegurant que els missatges d'error que es mostren estiguin segurs i desinfectats. En combinar la validació tant del costat del client com del servidor, el formulari garanteix una experiència d'usuari fluida alhora que manté una alta seguretat i evita enviaments innecessaris amb dades que falten o no són vàlides.

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

Millora de les tècniques de validació de caselles de verificació en formularis de WordPress

Quan es tracta de formularis personalitzats a WordPress, especialment quan s'utilitza JavaScript per a la validació, és essencial gestionar correctament diferents tipus d'entrada, incloses les caselles de selecció. La validació de la casella de selecció garanteix que els usuaris compleixin condicions específiques, com ara acceptar polítiques de privadesa o acceptar els termes i condicions. Sense validar aquests camps, correu el risc que els usuaris ignorin requisits importants, que poden afectar tant el compliment legal com la interacció dels usuaris.

Un aspecte que s'ha passat per alt de la validació de les caselles de selecció és assegurar-se que les validacions tant del front-end com del back-end estiguin alineades. Tot i que JavaScript gestiona la validació del costat del client, és igualment important que el back-end utilitzi PHP per validar dades, especialment quan es tracta d'informació sensible. Per exemple, utilitzant sanitize_text_field() i esc_html() en PHP afegeix una altra capa de seguretat eliminant les entrades no desitjades o malicioses. Això garanteix que, fins i tot si un usuari omet JavaScript, les dades es desinfecten abans de ser processades.

Un altre aspecte important de la validació de la casella de selecció és l'experiència de l'usuari. La validació en temps real amb JavaScript proporciona comentaris immediats, mostrant als usuaris quan una casella de selecció necessària està desmarcada. Això pot millorar significativament les taxes d'enviament de formularis i reduir els errors. La implementació de missatges d'error dinàmics, que apareixen sense una recàrrega de pàgina completa, manté els usuaris informats i els ajuda a entendre què cal corregir. En combinar JavaScript amb una validació PHP adequada, creeu un formulari robust i fàcil d'utilitzar que millora la seguretat i millora l'experiència general de l'usuari.