Nette 2.3.8 – Live Validace manuálně vykreslených formulářů

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
F.Raven
Člen | 12
+
0
-

Dobrý den,
vykresluji manuálně formulář a používám na něj Live Validaci

Kód z komponenty:

<?php
	$form->addText('firstname')
			->setRequired('Křestní jméno musí být vyplněno.')
			->addRule(Form::MIN_LENGTH, 'Křestní jméno musí mít nejméně 2 znaky.', 2)
			->addRule(Form::MAX_LENGTH, 'Křestní jméno musí mít maximálně 30 znaků.', 30);
?>

Kód v šabloně:

<div>
     <label n:name=firstname>Křestní jméno</label>
     <input n:name=firstname>
     <span id="frm-miniContactForm-form-firstname_message"></span>
</div>

Po kliknutí na submit button se všem špatně vyplněným prvkům přiřadí první zpráva v pořadí, která odpovídá na to, co je třeba opravit (první podmínka nad elementy, která není splněna – např. v mnou uvedeném kódu je to setRequired hláška). Když začnu psát do inputu, příslušná hláška zmizí (což je předpokládám správně), když ale napíšu pouze jeden znak, nenapíše se hláška pro MIN_LENGTH, ale javascript zuřivě focusuje právě upravovaný input (vyskakuje u toho i alert zpráva, ale tu mám přetíženou aby nevyskakovala nikdy a nikde, takže nic nedělá), takže zcela znemožňuje se odkliknout jinam, což je na jednu stranu dobře, protože element není správně vyplněný, ale nepíše to jak ho vyplnit (to co je v podmínce pro minimální délku) takže je to matoucí. Takhle to určitě fungovat nemá, myslím že tam musím mít něco špatně nastavené nebo nvm – koneckonců proto píšu sem. V javacriptu jsem udělal jedinou věc, a to že jsem přetížil metodu alert na prázdnou funkci. Kdyby jste někdo měl alespoň showcase té live validace, tak bych si asi poradil sám – bohužel jsem nic takového nenašel. Pravděpodobně dělám něco prostě jen špatně, nebo ta Live Validace nefunguje korektně na verzi 2.3.8 (což pochybuju) a je potřeba si jí vlastnoručně opravit (zatím jsem se v ní nevrtal, doufal jsem že to tak nějak začne fungovat bez toho).

Předem děkuji za pomoc a přeji hezký den.

enumag
Člen | 2118
+
0
-

Funkční showcase live validace, respektive automatické ajaxové validace bych sice měl, jen je to jaksi napsané přes Symfony formuláře které jsem si do Nette integroval. :-) Problematická live validace s nette formuláři byl jeden z důvodů.

Jan Mikeš
Člen | 771
+
0
-

@enumag takze ty neprovadis zadnou client-side validaci (jako takovou samu o sobe, pred odeslanim requestu)? Neni to nevyhodou, kdyz se odesilaji vetsi formy, napr s file uploadem? Kazdopadne bych byl velmi rad kdyby ses o sve reseni podelil, mozna bych se nechal inspirovat :-)

enumag
Člen | 2118
+
0
-

@Lexi Přesně tak, vše se validuje na serveru. Je to nová věc takže jsem se ještě nedostal k uploadu. Každopádně odesílat soubory na server ajaxem kvůli validaci je nesmysl, na to plánuji jiné řešení. Integraci symfony/form do Nette jsem už dal na GitHub (https://github.com/Arachne/Forms), na dokumentaci pracuji. Example mám funkční jen jsem jej ještě nehodil nikam na web a github (a potřebuje trochu zrefaktorovat). Každopádně tady jsme off-topic takže další komunikaci raději v jiném vláknu nebo mejlem. ;-)

Editoval enumag (7. 1. 2016 1:20)

F.Raven
Člen | 12
+
0
-

Děkuji za odkaz a radu, nicméně rád bych se držel té live validace na straně klienta, už kvůli tomu, že mám dojem, že stačí opravit fakt jen nějakou blbost a pojede to jak má, protože se zdá, že to odpaluje eventy korektně, jen to výsledný chování je nevyhovující (dost možná jsem prostě hloupej, moc jsem toho nenastavoval, prostě jsem to includnul a čekám že to bude fungovat). Jako asi to vyřeším tím, že se budu vrtat v kódu tý live validace, ale to se mě úplně nechce, protože ten, kdo to dělal to měl asi funkční ve stavu, ve kterém to je.

F.Raven
Člen | 12
+
0
-

Vyřešeno.

Celý proces validace jsem si odkrokoval a zjistil jsem, že metoda z "Live Validace ":https://componette.org/search/?…

<script>
	Nette.validateControl = function(elem, rules, onlyCheck, value) {
		elem = elem.tagName ? elem : elem[0]; // RadioNodeList
		rules = rules || Nette.parseJSON(elem.getAttribute('data-nette-rules'));
		value = value === undefined ? {value: Nette.getEffectiveValue(elem)} : value;
		...
	}
</script>

se nevykonává, místo ní se volala metoda stejného názvu z netteForms.min.js která samozřejmě nemůže fungovat tak, jak jsem očekával. Stačilo tedy odstranit referenci na netteForms.min.js, která se mi kdesi válela v kódu. Školácká chyba, na kterou autor live validace přímo upozorňuje. Omlouvám se všem za zbytečný thread. Validace funguje krásně jak má. Děkuji autorovi :)

Přeji pěkný den…