JS Validace formuláře s AJAX a bez AJAX se knihovnami netteForms.js a nette.ajax.js

freely111

Ahoj,
docela dlouho už se trápím s JS validací formuláře bez AJAX i přes AJAX a současně mám stáhnuté nejnovější nette.

Mám formulář, ve kterém nastavuji input na „setRequired“ a input opravdu obsahuje atribut „required“.

1. Formulář bez AJAXu:
Pokud mám zalinkovanou knihovnu „nette.ajax.js“, tak formulář JS validuje a hezky mi zobrazuje varování v pěkné bublině přímo u input, že pole je povinné.
Ovšem pokud zalinkuji do projektu ještě knihovnu „netteForms.js“, tak JS validace taky proběhne, ovšem varování o povinném input poli se zobrazí jako alert v prohlížeči místo pěkné bubliny hned vedle inputu. Pokud se podívám do HTML kódu, tak i tak input obsahuje atribut „required“.

2. Formulář s AJAXem
U ajax formuláře mě to zblobí tak, že JS validace proběhne pouze v případě, kdy mám zalinkovanou knihovnu „netteForms.js“ se současnou „nette.ajax.js“. Bez „netteForms.js“ se mi JS validace vůbec neukáže a s „netteForms.js“ se ukáže pouze jako alert okno v prohlížeči.

Kde dělám prosím chybu, tak aby mi fungovala JS validace jak bez ajaxu, tak i s ajaxem a současně v obou případech se zobrazovala pěkně graficky hned vedle input pole, když v obou případech pole input obsahuje atribut „required“?

<?php
// V presenteru mám:
$form->addText('name', 'Role: *', NULL, 50)->setRequired('Položka "role" je povinná.');

// V HTML se zobrazí v obou případech:
<input type="text" name="name" maxlength="50" id="frm-roleForm-name" required data-nette-rules='[{"op":":filled","msg":"Položka \"role\" je povinná."}]' value="member" class="text">
?>

Předem děkuji za každou radu.

iguana007

Chybu neděláš, to co se ti zobrazuje jako „pěkná bublina“ je build-in validace v prohlížeči (HTML5), takže pokud by si chtěl mít hezkou validaci i pro AJAX form, tak bych ti doporučil spíše použít tzv. live validaci: Live Form Validation Addon

freely111

iguana007 napsal(a):

Chybu neděláš, to co se ti zobrazuje jako „pěkná bublina“ je build-in validace v prohlížeči (HTML5), takže pokud by si chtěl mít hezkou validaci i pro AJAX form, tak bych ti doporučil spíše použít tzv. live validaci: Live Form Validation Addon

Pecka, díky. Vyhodil jsem tedy „netteForms.js“ a nalinkoval „live-form-validation.js“.

Mám ale dva dotazy k té live validaci.

Pokud input, který je „required“ vyprázdním a rovnou kliknu na odeslat, tak mi zpráva o povinném poli vedle inputu jenom problikne a hned zmizí. Pokud kliknu na „odeslat“ a tlačítko nechávám zmačknuté, tak se zpráva zobrazí, jakmile tlačítko submit opustím, tak se zpráva vymaže. Jediná možnost je, aby zpráva vedle inputu zůstala, že kliknu mimo input na něco jiného a teprve potom tam ta zpráva zůstane. A následně když kliknu na „odeslat“, tak mi zprávy opět všechny zmizí a začnou se postupně zobrazovat jen když kliknu do konkrétního inputu a potom z něho vylezu.
Díval jsem se nastavení a v článku se píše, že když přidám form elementu třídu „validate-on-load“, tak by se to pole ve formuáři mělo ověřit hned po načtení stránky. Je to tak? Ale to mi nefunguje.

Viz. k dobu 2.:

<?php
class="validate-on-load"

<input type="text" name="name" maxlength="50" id="frm-roleForm-name" required data-nette-rules='[{"op":":filled","msg":"Položka \"role\" je povinná."}]' class="validate-on-load">
?>

Má někdo zkušenosti a mohl by opět poradit? Díky.

Editoval freely111 (16. 9. 2015 16:28)

iguana007

Ad 1: Netuším, já tento addon ještě nepoužil, zkus kontaktovat autora nebo pokud si myslíš, že je to bug, tak vytvoř issue na GitHubu
Ad 2: Ukaž, jak tomu formu přiřazuješ tu classu…

freely111

Viz. můj předchozí bod 1. se vyřešil novější knihovnou z https://github.com/…m-validation

Ovšem s novou verzí 1.4.2 se mi při odeslání formuláře, když je pole nevyplněné a označené zprávou vedle inputu, totálně kousne prohlížeč.

Při návratu na knihovnu 1.4.1. je to OK, ale tam je zase problém jak jsem psal v předchozím příspěvku bod 1.

freely111

iguana007 napsal(a):

Ad 1: Netuším, já tento addon ještě nepoužil, zkus kontaktovat autora nebo pokud si myslíš, že je to bug, tak vytvoř issue na GitHubu
Ad 2: Ukaž, jak tomu formu přiřazuješ tu classu…

K bodu 2 tam mám teď toto na zkoušku a taky nic:

<?php
		$form->addText('name', 'Role: *', NULL, 50)
			->setAttribute('class', 'validate-on-load')
			->setRequired('Položka "role" je povinná.');
?>

Pokud se podívám do HTML, tak input „name“ obsahuje class=„validate-on-load“. Po načtení stránky se prázdné pole ale neověří. Pouze až když do něho kliknu a současně z něho vylezu.

iguana007

freely111 napsal(a):

<?php
		$form->addText('name', 'Role: *', NULL, 50)
			->setAttribute('class', 'validate-on-load')
			->setRequired('Položka "role" je povinná.');
?>

No jo, ale dle návodu máš tu class přidat formuláři, nikoli formulářovému prvku:

$form->getElementPrototype()->addAttribute(array('class' => 'validate-on-load'));

freely111

iguana007 napsal(a):
freely111 napsal(a):
<?php
		$form->addText('name', 'Role: *', NULL, 50)
			->setAttribute('class', 'validate-on-load')
			->setRequired('Položka "role" je povinná.');
?>
No jo, ale dle návodu máš tu class přidat formuláři, nikoli formulářovému prvku:
$form->getElementPrototype()->addAttribute(array('class' => 'validate-on-load'));

Díky, to jsem tam měl taky a nic. Každopádně s tím zamrznutím v prohlížeči už je to vyřešené, pravděpodobně to byl přímo autor, který to velmi rychle opravil a moc mu děkuji.

Řešil jsem to zde:
https://github.com/…ion/issues/4

Každopádně to „validate-on-load“ na form už mi funguje taky :) Tak jsem asi měl někde chybu, a nebo to bylo opraveno s tím.

Doporučuji všem, kteří tuto knihovnu používají, aby si stáhli novější verzi na GitHub:
https://github.com/…m-validation

Ještě jednou všem díky :)