Display form errors jinak než javascript alert/modal window
- m.brecher
- Generous Backer | 871
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)
- Kamil Valenta
- Člen | 820
@Šaman už před 3 lety predikoval, že to zapadne :)
https://forum.nette.org/…-u-formulare
- m.brecher
- Generous Backer | 871
@KamilValenta
máš pravdu zapadlo to :), novinkou, kterou jsem ale včera „objevil“ je pro mě custom event. Předtím jsem totiž mezi svým javascriptem a netteForms.js předával vzájemně reference a úplně jsem se v tom motal.
Javascriptovou validaci jako @Šaman nevypínám, ale potřebuji forwardovat form errors do jiného javascriptu, což event řeší elegantně.
Editoval m.brecher (29. 9. 22:49)