Conditionele velden valideren in ZOOlanders Essentials Forms

Je kent het vast wel: je bouwt een formulier en hebt een "Anders, namelijk..." optie. Je wilt dat een textarea pas verschijnt als die optie is aangevinkt. Simpel. Maar, dat veld moet dan ook verplicht zijn. Als het niet is aangevinkt, moet het verborgen én niet-verplicht zijn.

Deze handleiding is niet theoretisch. De hier beschreven oplossing is het directe resultaat van een uitgebreide, stapsgewijze debug-sessie op ons offerteformulier, nadat alle 'standaard' methodes mislukten. De code in dit artikel is uitvoerig in de praktijk getest en pakt de complexe "vechtende" interactie tussen de verschillende ZOOlanders-hooks aan.

Het klinkt eenvoudig, maar dit is waar veel ontwikkelaars vastlopen in ZOOlanders Essentials Forms. De standaard required-optie zit de disabled-optie in de weg, en de ingebouwde validator wist je handmatige foutmeldingen.

Na een hoop debuggen, is hier de oplossing die voor mij werkt. We gaan de UI (tonen/verbergen) en de validatie (controleren) volledig van elkaar scheiden met twee verschillende "Hooks".

Stap 1: De setup in YOOtheme Pro

Voordat we een letter code schrijven, moet de basis goed staan.

1. Alle "normale" verplichte velden (zoals 'Naam', 'E-mail', 'Akkoord') stel je in de builder in als Verplicht (Required).

2. De checkbox-groep ("Over welke dienst gaat het?"):

   • Selecteer het Checkbox-element.

   • Ga naar het Content tabblad.

   • Bij Control, vul de naam in die je in de code gaat gebruiken, bijvoorbeeld: Over_welke_dienst_gaat_het.

   • Vink Required (Verplicht) AAN. Onze code in Stap 3 zal deze check overnemen, maar het is goed om dit als basis in te stellen.

   • Ga naar Options. Voeg hier je keuzes toe.

   • Belangrijk: Voor de "Anders"-optie, zorg dat de Text (Label) is wat de gebruiker ziet (bv. Anders, namelijk:) en dat de Value exact overeenkomt met wat je in de code gebruikt (bv. Anders, namelijk). Let op: in ons geval was de Value zonder dubbele punt!

3. Het "Anders" veld (de <textarea> zelf):

   • Ga naar het Advanced tabblad.

   • Geef het een ID, bijvoorbeeld: anders-container

   • Geef het de Class: uk-hidden (om het standaard te verbergen).

   • Ga naar het Field tabblad.

   • Geef het een ID Attribute (Control), bijvoorbeeld: Anders

   • Voeg bij Attributes een attribuut toe met de Name: disabled (dit is heel belangrijk!).

   • Ga naar het Content tabblad.

   • Zorg dat "Required" (Verplicht) UITGEVINKT staat. We gaan dit veld nooit verplicht maken in de builder, dat regelt onze code.

Als je klaar bent, is je "Anders"-veld standaard uk-hidden, disabled, en niet required. Dit is de perfecte beginstaat.

Stap 2: De 'On Field Change' hook

De eerste hook regelt puur de visuele kant. Het kijkt of de checkbox wordt aangevinkt en past de zichtbaarheid en de disabled-status aan.

Plak de volgende code in het On Field Change-veld (onder Hooks):

var cgn = 'Over_welke_dienst_gaat_het[]';
var acw = 'Anders, namelijk';
var aci = 'anders-container';
var ati = 'Anders';

if (field.name === cgn) {
    var cont = form.querySelector('#' + aci);
    var area = form.querySelector('#' + ati);
    var allBoxes = form.querySelectorAll('input[name="' + cgn + '"]');
    var isChecked = false;

    allBoxes.forEach(function(cb) {
        if (cb.value === acw && cb.checked) {
            isChecked = true;
        }
    });

    if (cont && area) {
        if (isChecked) {
            UIkit.util.removeClass(cont, 'uk-hidden');
            area.removeAttribute('disabled');
        } else {
            UIkit.util.addClass(cont, 'uk-hidden');
            area.setAttribute('disabled', 'disabled');
        }
    }
}

Wat doet dit?

• Als "Anders, namelijk" wordt aangevinkt, verwijdert het uk-hidden (het veld wordt zichtbaar) en disabled (het veld wordt actief en de waarde wordt meegestuurd).

• Als het wordt uitgevinkt, voegt het uk-hidden en disabled weer toe.

Stap 3: De 'Before Submission' hook

Dit is de meest cruciale stap. Omdat de standaard-validator en onze conditionele logica "vechten", nemen we het heft in eigen handen. We schrijven één script dat de volledige validatie van het formulier overneemt.

Plak de volgende code in het Before Submission-veld:

var heeftFouten = false;
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

function toonFout(fieldName, message) {
    var fieldSelector = fieldName.replace('[]', '');
    var wrapper = form.querySelector('[data-yooessentials-form-field="' + fieldSelector + '"]');
    
    if (wrapper) {
        var errorContainer = wrapper.querySelector('[data-yooessentials-form-field-errors]');
        if (errorContainer) {
            errorContainer.innerHTML = message;
        }
        
        var inputField = wrapper.querySelector('input, textarea, select');
        if (inputField && inputField.type !== 'checkbox' && inputField.type !== 'radio') {
            inputField.classList.add('uk-form-danger');
        } else if (!inputField) {
             wrapper.classList.add('uk-form-danger');
        }
    }
    heeftFouten = true;
}

form.querySelectorAll('[data-yooessentials-form-field-errors]').forEach(function(el) {
    el.innerHTML = '';
});
form.querySelectorAll('.uk-form-danger').forEach(function(el) {
    el.classList.remove('uk-form-danger');
});

var naam = form.querySelector('input[name="Naam_contactpersoon"]');
if (naam && naam.value.trim() === '') {
    toonFout('Naam_contactpersoon', 'Aan wie mogen we het voorstel richten?');
}

var email = form.querySelector('input[name="E-mailadres"]');
if (email) {
    if (email.value.trim() === '') {
        toonFout('E-mailadres', 'Op welk e-mailadres kunnen we je het voorstel sturen?');
    } else if (!emailRegex.test(email.value)) {
        toonFout('E-mailadres', 'Voer een geldig e-mailadres in.');
    }
}

var telefoon = form.querySelector('input[name="Telefoonnummer"]');
if (telefoon && telefoon.value.trim() === '') {
    toonFout('Telefoonnummer', 'Vul alsjeblieft je telefoonnummer in, zodat we eventuele vragen kunnen bespreken.');
}

var diensten = form.querySelectorAll('input[name="Over_welke_dienst_gaat_het[]"]:checked');
if (diensten.length === 0) {
    toonFout('Over_welke_dienst_gaat_het', 'Geef alsjeblieft aan voor welke dienst(en) je een offerte wilt ontvangen.');
}

var omschrijving = form.querySelector('textarea[name="Omschrijf_je_project"]');
if (omschrijving && omschrijving.value.trim() === '') {
    toonFout('Omschrijf_je_project', 'Vertel ons in het kort over je plannen. Hoe meer details, hoe beter ons voorstel.');
}

var akkoord = form.querySelector('input[name="Akkoord[]"]:checked');
if (!akkoord) {
    toonFout('Akkoord', 'Ga alsjeblieft akkoord met de voorwaarden om de aanvraag te kunnen versturen.');
}

var andersCheckbox = form.querySelector('input[name="Over_welke_dienst_gaat_het[]"][value="Anders, namelijk"]');
var andersTextarea = form.querySelector('textarea[name="Anders"]');

if (andersCheckbox && andersTextarea && andersCheckbox.checked) {
    if (andersTextarea.value.trim() === '') {
        toonFout('Anders', 'Je hebt \'Anders\' geselecteerd. Kun je in dit veld kort toelichten wat je in gedachten hebt?');
    }
}

if (heeftFouten) {
    return false;
}

Waarom dit de juiste combinatie is

1. Stabiele UI: De On Field Change-code regelt de zichtbaarheid perfect.

2. Geen Conflicten: We negeren het onbetrouwbare data-object en lezen alle waarden live uit het formulier met form.querySelector.

3. Complete Validatie: De Before Submission-code valideert elk verplicht veld, niet alleen ons conditionele veld.

4. return false;: Dit is de sleutel. Als heeftFouten true is, stopt return false; de verzending voordat de standaard-validator kan draaien en onze foutmeldingen kan wissen. Dit stopt het "gevecht" tussen de scripts.

Het resultaat: een naadloze gebruikerservaring waarbij alle validatiefouten (standaard én conditioneel) correct en tegelijkertijd verschijnen.

Hulp nodig bij het bouwen van een complex, dynamisch formulier op maat? Dit is precies het soort maatwerk dat wij leveren als onderdeel van onze Website laten maken.