Skip to content

Oprava vkládání validačních zpráv při zanořených placeholderech

Choose a tag to compare

@zipper zipper released this 20 Aug 15:14
· 5 commits to master since this release
6980017

Oprava mechaniky hledání elementu pro validační zprávy, která nepočítala se zanořováním, tj. se situací, kdy uvnitř placeholderu jedné kontrolky (typicky <fieldset> s radiolistem) leží další formulářové prvky s vlastními zprávami. V takové struktuře se zprávy vnořených prvků vkládaly k nadřazené kontrolce a zpráva nadřazené kontrolky skončila v elementu zpráv prvního vnořeného prvku.

Nově platí:

  • Placeholderem se stane i element, který má vlastní element zpráv .pdforms-messages__aria. Vnořený prvek tak najde svůj vlastní placeholder, i když na něm není .pdforms-messages--input.
  • Zpráva se vkládá výhradně do elementu zpráv, který patří nalezenému placeholderu. Elementy zpráv vnořených prvků se přeskakují, tj. nepoužije se takový, mezi kterým a placeholderem leží další element, který sám může být placeholderem.

Struktura, která dříve nefungovala a nyní ano:

<fieldset class="pdforms-messages pdforms-messages--input">
    <legend>Doručovací adresa</legend>

    <div class="form-bool">
        <label><input type="radio" name="address" value="other"> Jiná adresa</label>

        <!-- Vnořený formulář, jeho zprávy zůstávají u něj -->
        <p>
            <label for="street">Ulice:</label>
            <input type="text" id="street" name="street" ...>
            <span class="pdforms-messages__aria" aria-live="polite"></span>
        </p>
    </div>

    <!-- Zpráva radiolistu se vloží sem, ne k inputu ulice -->
    <span class="pdforms-messages__aria" aria-live="polite"></span>
</fieldset>

Nově je veřejně dostupný selektor placeholderu a metoda pro dohledání cílového elementu zpráv, obojí je možné v projektu přebít:

pdForms.placeholderSelector = '.pdforms-messages--input, :has(> .pdforms-messages__aria)';

pdForms.getMessagesTarget(placeholder);

Hranice zanoření se odvozuje přímo z pdForms.placeholderSelector (plus <p> fallback, který používá getMessagePlaceholder()), takže množina placeholderů je vždy podmnožinou hranic zanoření, a to i po přebití selektoru v projektu.

Pokud si projekt přepisuje pdForms.addMessage() a kopíruje z něj hledání elementu zpráv, je potřeba nahradit placeholder.querySelector('.pdforms-messages__aria') voláním pdForms.getMessagesTarget(placeholder). Jinak není potřeba měnit nic, ostatní tvary DOMu (radiolisty, vnořené listy, --input wrappery, samostatné <p>) se chovají shodně jako dříve. Jediná změna nad rámec opravovaného tvaru: pokud --input wrapper obsahuje neutrální element obalující element zpráv, stavové CSS třídy sednou na ten vnitřní element.

Interně se používá :has() a :not() s komplexním selektorem, oba jsou Baseline.

Zároveň je srovnaná verze v hlavičce a v pdForms.version, která v releasech 4.3.1 a 4.3.2 zůstala na 4.3.0.

Full Changelog: v4.3.2...v4.4.0