Péhápkaři v Pecce: pd/forms – Petr Klobás – 16. 10. 2019

Jednoduché rozšíření pro komplexní validace v Nette formulářích
Petr Klobás
pd/forms
FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás

O čem bude řeč
• terminologie formulářových validací
• motivace vzniku pd/forms
• podpora Nette pro custom validace
• pd/forms
• PdFormsRuleOptions
• Live validace, měkká validace a validační kontext
• Měkká validace pomocí Nette pravidel
• Je libo AJAX?
• Závislé inputy a manipulace s formulářem po validaci
• pár slov závěrem

Terminologie formulářových validací
• “Standardní” validace: validace, která je zpracována na straně
serveru a může být zpracována i na straně klienta
• Live validace: bezprostřední validace formuláře na straně klienta
(v prohlížeči) při interakci s formulářem
• Měkká validace: live validace, která upozorní uživatele na problém
ve formuláři, ale umožní odeslání formuláře (není kontrolována na
straně serveru)
• AJAX validace: live validace, která pro výsledek validace volá
asynchronně zpracování na backendu

Proč pd/forms?
Vznik samostatné knihovny pd/forms:
1. Zachování původní funkcionality měkkých a ajaxových validací
po aktualizaci Nette
2. Vylepšení / usnadnění použitelnosti v aplikaci
3. Snazší údržba, více verzí, rozšiřitelnost, dokumentace, testy
Základní myšlenka:
“Možnost přidat komplexní validaci na backendu s minimální nutností
psát frontendovou obsluhu.”

Podpora Nette pro custom validace
• Nette nabízí podporu pro vytváření vlastních validačních pravidel,
pokud vestavěná pravidla nestačí
• BaseControl::addRule(MyRules::RULE, ‘_msg_’, $args);
• https://pla.nette.org/cs/vlastni-validacni-pravidla
• Argumenty addRule() => data-nette-rules
• poslední parametr addRule není typovaný, čehož se dá s výhodou
využít

PdFormsRuleOptions
• jednoduchý value object, který je serializovatelný do JSONu
• v balíčku k dispozici továrna jako služba pro instanciaci
• nese všechny potřebné informace pro zpracování validace na
frontendu i backendu

Live validace, měkká validace a validační kontext
• (nejen) live validaci zajišťuje na frontendu javascriptová obsluha
pdForms.js
• vzhledem k tomu, že máme koncept přidávání komplexních
validací řízen z backendu, musíme tam vyřešit obsluhu pravidla
• tu vyřešíme poměrně jednoduše pomocí RuleOptions objektu

• backend máme vyřešen, zbývá vytvořit validátor pro frontend,
o který nám jde u měkké validace především
• PdFormsRules::phone => PdFormsRules_phone
• hotovo 🤝

• může se objevit potřeba dodat validátoru sadu dat, proti kterým se
bude hodnota formulářového pole validovat
• taková sada může být v čase proměnná, takže ji nelze hard-
kodóvat do validátoru (na BE řešitelné, ale co FE?)
• tento typ dat předáme pravidlu jako validační kontext

Měkká validace Nette pravidel
• Nette obsahuje sadu obecných validátorů, které ovšem nelze
jednoduše použít při měkké validaci, což nám přišlo škoda
• PdFormsRules::NETTE_RULE_PROXY + createNetteOptional()
• netřeba řešit frontendovou obsluhu, funguje out of the box

Je libo AJAX?
• asynchronní volání pro live validaci vstupu
• kdy zapojit?
• validace je příliš komplikovaná pro zpracování na frontendu
• validace je závislá na externí službě
• kombinace obojího
• pd/forms nabízí podporu jak na backendu tak frontendu
• Rules::AJAX + RuleOptions::enableAjax($endpoint,
$validationService)
• PdFormsValidationServiceInterface
• PdFormsValidationControllerInterface
• PdFormsAbstractValidationController

Je libo AJAX?
• Příklad - povinná validace lékové karty na lékárenském eshopu
• vytvoření pravidla
• endpoint + validationService
• více validačních stavů

Je libo AJAX?
• ValidationServiceInterface + ValidationResult

Je libo AJAX?
• ValidationControllerInterface

Je libo AJAX?
• AbstractValidationController
• pomocí tohoto kontroleru jsme pokryly všechny implementované
ajaxové validace

Závislé inputy a manipulace s formulářem po validaci
• v našem kontextu při AJAXu
• rozlišujeme dva typy validace, která pracuje s více inputy
• na vstupu: validace závislá na hodnotách více inputů ve
formuláři; např. zadání správné kombinace město + psč
• na výstupu: validace vrací výsledek, který chceme doplnit do
formuláře nebo změnit nějaký prvek (select, checkbox); např.
validace DIČ ﬁrmy a doplnění jména ﬁrmy a IČ do formuláře
• pd/forms pro tyto situace poskytuje mechanismus závislých inputů

• Příklad - validace DIČ ﬁrmy a doplnění jména ﬁrmy a IČ do
formuláře

• ValidationServiceInterface + ValidationResult

Závěrem
• https://github.com/peckadesign/pdforms
• knihovna je volně k použití, publikovaná na packagistovi => composer
• obsahuje pár validátorů, které se můžou hodit v českém rybníčku (telefon,
vstup obsahuje číslo (ulice), IČO ﬁrmy)
• udržujeme verzi pro Nette 2.3 a 2.4 (3.0 ve výrobě)
• má dokumentaci i testy (zatím jen PHP), chceme doplnit JS testy
• knihovna má obsáhlejší JS obsluhu, díky @zipper

Díky za pozornost
E-mail petr.klobas@peckadesign.cz Twitter @klobinoid LinkdeIn /petrklobas

Péhápkaři v Pecce: pd/forms – Petr Klobás – 16. 10. 2019

Recommended

Recommended

More Related Content

Similar to Péhápkaři v Pecce: pd/forms – Petr Klobás – 16. 10. 2019

Similar to Péhápkaři v Pecce: pd/forms – Petr Klobás – 16. 10. 2019 (20)

More from PeckaDesign.cz

More from PeckaDesign.cz (20)

Péhápkaři v Pecce: pd/forms – Petr Klobás – 16. 10. 2019