Repository navigation
Oprava vkládání validačních zpráv při zanořených placeholderech
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