netteForms a morální dilema

Ahoj,

Prostudoval jsem si oba PR, které požadují opačné chování a oba dva jsou svým způsobem argumentačně podložené. Nelze oběma současně vyhovět.

Příčina je v tom, že Nette umožňuje vnitřně rozporné nastavení:

$form->addText('age', 'Věk')
    ->setHtmlAttribute('type', 'number');

Jak to má Nette interpretovat??

jako:

$form->addInteger('age', 'Věk')      // chci <input type="nubmer"...>

nebo jako:

$form->addText('age', 'Věk', 2, 2)	// chci <input type="text"...>
    ->addRule($form::Integer);      // s přidanou validací Integer

Vývojář totiž může chtít jedno nebo druhé, ale zvolil nejasný zápis.

Řešením by bylo vyloučit vnitřně rozporné zápisy, kdy zvolím typ prvku a poté jej pomocí setHtmlAttribute(‚type‘, ‚something‘) měním a donutit vývojáře specifikovat typ prvku předepsaným způsobem. V chybové hlášce by mohlo být navedení správným směrem např:

$form->addText('age', 'Věk')
    ->setHtmlAttribute('type', 'number');   // Exception

HtmlInputTypeMismatchException
Change type of input TextInput is illegal, use appropriate form control or validation rule

V Nette formulářích je ale ještě jiný problém, který s diskutovaným souvisí. Uvedu příklad. Chtěl bych mít textové políčko o délce dva znaky s přidanou validací Integer, ale nechci prvek <input type=„number“ …> protože ten mě nevyhovuje. Napíšu korektní kód:

$form->addText('age', 'Věk', 2, 2)	// chci <input type="text"...>
    ->addRule($form::Integer);      // s přidanou validací Integer

ale Nette udělá něco jiného – automaticky změní typ prvku na <input type=„number“ …>. Co jiného můžu dělat než zkusit vnitřně rozporný zápis?

$form->addText('age', 'Věk')
    ->setHtmlAttribute('type', 'number');

Ten ale vede na zřejmě neřešitelné dilema o kterém je toto vlákno.

Závěr

Mnou navrhovaná změna je bohužel BC break, ale odstraňuje nekonzistentní chování formulářů co se týče typu prvku. Tím se vyřeší dilema a zpřehlední kód.

a) nikdy neměnit typ prvku zvolený v kódu $form->addText() ⇒ vždycky <input type=„text“…>
b) vyloučit dodatečnou změnu typu ->setHtmlAttribute(‚type‘, ‚???‘)
c) umožnit přidání atypického validačního pravidla $form::Integer do jiných než number prvků – má to svoje použití

Poznámka: validátor $form::Integer je v nápovědě IDE přeškrtnutý – plánuje se jeho vyřazení ?? To by byla chyba, protože má praktické použití. Doporučuji validátor $form::Integer ve formulářích ponechat.

Editoval m.brecher (5. 5. 15:38)

@DavidGrudl

Souhlasím s @MarekBartoš, že nejlepším řešením v Nette javascriptové validaci je ručně nastavené html atributy ignorovat. Atribut type=number prvku input má přece vestavěnou html validaci a maskování vstupu, které neumožní zadat nenumerickou hodnotu.

Když se vývojář rozhodne nepoužít Nette validační prostředky a místo nich použije html, nechme validaci na něm. Předejde se tím situacím, kdy dobře míněná přídavná nette javascriptová validace v některých kombinacích způsobí problém.

Já bych to rozšířil ještě o možnou třetí cestu, a sice že by tohle chování zůstalo, ale respektovalo by nastavený validation scope. Tedy implicitně by se platnost prvků v prohlížeči kontrolovala, ale šlo by to na straně PHP explicitně vypnout. Ale vůbec nevím, jestli by to tak bylo lepší.

Je to komplikované a asi to stejně nikdo využívat nebude. Proč vývojáři “přetypovávají” input text na number ? Použití addInteger() přece poskytne stejnou funkci a navíc zabezpečenou. Myslím, že je to neznalost, nikoliv promyšlený záměr. Pochybuji, že by někdo explicitní vypínání javascriptové validace použil.

dokumentace

Přetypování typu inputu přináší v některých případech bezpečnostní rizika, v některých ne. Začínající vývojář se v problematice nemusí plně orientovat. Dokumentace v odstavci o nastavení Html atributů zmiňuje možnost nastavit type jako běžnou funkci aniž by zmiňovala případná rizika: https://doc.nette.org/…ms/rendering#…

citace z dokumentace:

Nastavení typu:

$form->addText('tel', 'Váš telefon:')
	->setHtmlType('tel')
	->setHtmlAttribute('placeholder', 'napište telefon');

Co kdyby se do dokumentace doplnil nový odstavec Nastavení Html typu, kde by se problematika trochu nastínila, protože některá nastavení odlišných typů jsou logická a bezpečná, některá jsou nebezpečná ?? Třeba před přetypováním text na number bych varoval a doporučil použití addInteger().

Editoval m.brecher (5. 5. 20:09)

Tak bych řekl, že jsme se vůbec, ale vůbec, nepochopili :-)

Pokusil jsem se pochopit správně první citované issue https://github.com/…s/issues/289, kde autor dodal vzorek testovacího kódu a popsal chybu. Pointa byla v tom, že pokud se do prvku number vyplní nečíselná hodnota + další podmínky, formulář po odeslání nezobrazí žádnou chybu, ale měl by.

Testovací kód:

$form = new Nette\Application\UI\Form();

$dep = $form->addCheckbox('dep', 'Num required');

$num = $form->addText('num', 'Number');
$num->setHtmlAttribute('type', 'number');
$num->addConditionOn($dep, $form::Equal, true)->setRequired('pole Number je povinné');

$form->addText('required', 'Required')->setRequired('pole Required je povinné');

$form->addSubmit('submit', 'done')
    ->onClick[] = $this->handleTestNumber(...);

return $form;

V Google Chrome vůbec nejde vložit do pole number nečíselnou hodnotu, ale jde to např. ve Firefoxu. Ve Firefoxu jsem podle popisu reprodukce chyby:

• zaškrtnul checkbox
• vyplnil do pole num neplatnou hodnotu xx
• pole required jsem ponechal nevyplněné
• odeslal formulář

Formulář se neodeslal, html 5 validace zachytila chybu v poli num a hlásí „Zadejte prosím platné číslo“

Píšeš, že nette javascript kontroluje platnost čísla:

Nicméně v tomto případě netteForms.js kontroluje platnost vloženého čísla.

V uvedeném vzorku validuje chybu number html 5 a netteForms.js se nijak neaktivují.

Závěr

Chybu uvedenou v issue se mě nepodařilo reprodukovat a dle mnou provedeného testu ve Firefoxu se aktivuje html5 validace, která je zdá se dostatečnou zábranou před odesláním neplatné hodnoty.

Proto mě přijde zbytečné k funkční html5 validaci inputu number přidávat javascriptové vylepšování.

Ověření issue číslo 2

Otestoval jsem si ve Firefoxu funkci vzorového kódu předloženého v druhém issue https://github.com/…s/issues/328

$form = new Nette\Application\UI\Form();

$checkbox = $form->addCheckbox('checkbox', 'Need a number?');

$form->addInteger('number1', 'Number1')
    ->addConditionOn($checkbox, $form::Equal, true)
    ->setRequired('required number1');

$form->addText('number2', 'Number2')
    ->setHtmlType('number')
    ->addConditionOn($checkbox, $form::Equal, true)
    ->setRequired('required number2')
    ->addRule($form::Integer, 'Need a number');

$form->addSubmit('submit', 'done')
    ->onClick[] = $this->handleTestNumber(...);

return $form;

Autor popisuje chybu takto „When the input type number is used, it is always validated for the correct number format, even if it is not required“. Což není chyba, ale správná funkce. Pokud se použije input number, potom html5 validuje formát zadaného vstupu a vyhodí chybu při nečíselné hodnotě.

Přesně takto funguje vzorek kódu. Html5 validace hlásí v obou inputech „Zadejte prosím platné číslo“.

Autor dále popisuje tuto chybu: „When you input non-numerical text foo (e.g. in Firefox) into the inputs, the form cannot be submitted because of JS validation and Nette.invalidNumberMessage is shown even with unchecked checkbox.“

Při mém testu ve Firefoxu a poslední verzi nette/forms se nette javascriptová validace vůbec neaktivovala a formulář validoval pomocí html5 validace.

Autor dále popisuje Expected Behavior takto: „At least for `number2', the number format should not be validated unless the checkbox is actually checked. The rule explicitly says that the number is only required if the checkbox is checked. If it is unchecked, the input is ignored.“

To není dobrý návrh. Funkce nette formulářů je v pořádku, pokud je input typu number, nelze validaci Integer dodatečně podmínit, ale musí být natvrdo nastavená.

Závěr

Po podrobném prozkoumání a otestování údajných chyb ve validaci nette formulářů v obou citovaných issue konstatuji, že chyby ve validaci uváděné v issue se buďto nepodařilo reprodukovat, nebo se nejedná o chyby ale o správné chování. Nepodařilo se mě ale ani v jednom případě aktivovat nette javascriptovou validaci o níž @DavidGrudl píše zde:

Opět, je to jen kosmetika. Nicméně v tomto případě netteForms.js kontroluje platnost vloženého čísla. Vždy, bez toho, že by jakákoliv validace byla specifikována v PHP kódu.

a zde:

Důvod je jednoduchý: pokud by uživatel zadal neplatnou hodnotu, prohlížeč ji na server neodešle.

Závěr mám ten, že v html5 formulářích, pokud si uživatel zvolí dobrovolně html atribut number místo addInteger() plně postačuje ochrana html5 validací a není nutné v tomto případě přidávat jakokoliv další ochranu javascriptem.

Za me oba pristupy davaji smysl. Ale ja se obecne ridim pravidlem ze kod by mel co nejmene veci delat automagicky. Protoze je programator neceka. IMHO je vudy lepsi vyzadovat explicitni zadani nez implicitne udelat neco neocekavaneho.

Ale v tomhle pripade je to dost seda zona protoze tim ze netteForms vypnout HTML5 validaci by se dalo cekat ze ji nahradi. Aby se to na klientovi chovalo podobne s i nez netteForms.

@KamilValenta a očekával bys, že se ti občas nějaká vyplněna položka nečekaně ztratí?

Myslím, že to by nemělo nastat za žádných okolností. Takže raději tu nečekanou validaci zachovám

Já bych to chápal takto:

Validace na straně klienta (input number):

$form->addText('age', 'Věk')
    ->setHtmlAttribute('type', 'number');

Validace na serveru (input number)

$form->addInteger('age', 'Věk')

Validace na serveru (input text)

$form->addText('age', 'Věk', 2, 2)
    ->addRule($form::Integer);

Ale nikdy by mě nenapadlo první případ nikde používat. Formulářů už jsem napsal spoustu. Nette by mělo validovat pouze addInteger|Float|Email atp. a pravidla skrze addRule().