Display form errors jinak než javascript alert/modal window

Ahoj!

javascript netteForms.js nabízí v základu v nových verzích nette/forms pro javascriptový display chyb formuláře místo alert() okénka o něco lepší html element <dialog>. Elegantnější UX řešení je místo modal okénka s texty zvýraznit barevně formulářové prvky s chybami přímo ve formuláři s dynamickým popisem chyb přímo u prvků.

Kdo to potřebuje udělat musí vyřešit problém jak deaktivovat defaultní zobrazení chyb a místo něj předat chyby z netteForms.js do custom javascriptu. Čas od času toto téma někdo řeší, ale kvalitní řešení jsem nenašel – viz fórum:

https://forum.nette.org/…-v-js-alertu
https://forum.nette.org/…ead-of-alert

Dnes jsem otestoval toto jednoduché a použitelné řešení. Javascript netteForms.min.js zpřístupňuje objekt pro validaci formulářů v globální proměnné Nette. Chyby které dodá validace formuláře zobrazuje do dialog/alert window metoda showFormErrors(form, errors), kterou nahradíme vlastní metodou:

// override Nette method
Nette.showFormErrors = function(form, errors){
    if(errors.length > 0){
        window.dispatchEvent(new CustomEvent('formError', {detail: {form: form, errors: errors }}))
    }
}

metoda nyní nic nezobrazuje, a předá chyby + element validovaného formuláře do custom eventu ‚formError‘ pro další zpracování.

Na event si zavěsíme vlastní listener a předáme chyby do vlastního javascriptu pro custom display:

// pass form + errors to custom javascript
window.addEventListener('formError', event => myErrorDisplayer.handleErrors(event.detail.form, event.detail.errors))

Editoval m.brecher (29. 9. 21:21)