Live Form Validation

Script generující JavaScriptovou validaci, která se trochu liší od té standardní v Nette.

Validuje se totiž control po controlu ‚za běhu‘ při vyplňování formuláře, nikoli až při odeslání formuláře.

Pozn.: není nutné žádné 3rd-party knihovny, i když ji sami můžete použit. Viz dále

Source pro Nette 2.0	gist
Download pro Nette 0.9.x	liveformvalidation-0.9.zip
Verze	0.9
Demo staré verze	zde
Forum thread	http://forum.nette.org/…m-validation
Autor	Radek Ježdík, Marek Dušek
Licence	New BSD License

Ukázka

Live Form Validation pro Nette 2.0

Aktuální a vylepšená verze pro Nette 2.0 je zde.

Instalace pro Nette 0.9.x

Stáhněte si komprimovanou složku z této stránky a rozbalte ji. Ve složce je LiveClientScript.php, třída, která renderuje validaci a LiveFormValidation.js, který definuje pomocné javascriptové funkce.

Použití v Nette 0.9.x

Pro zprovoznění skriptu je nutné nastavit proměnnou ClientScript v objektu Renderer ve formuláři na novou instanci třídy LiveClientScript:

// vytvoříme formulář:
$this->form = new AppForm($this, 'test');

// ... přidáme controls a validační pravidla ...

// a vytvoříme nový Client Script a v Rendereru ho nasetujeme
// (tím se přepíše původní InstantClientScript)
$this->form->getRenderer()->setClientScript(new LiveClientScript($this->form));

Pozor! Pro správnou funkci javascriptové validace je nutné aby formulář byl pojmenován (2. parametr consructoru).

Třída je převážně stejná jako InstantClientScript, pouze bylo upraveno renderování JavaScriptu do stránky.

Pokud nebudete měnit funkčnost zobrazení/skrytí chyby dle svého (viz níže) je nutné do stránek/šablon includovat soubor LiveValidation.js obsažený v archivu, který definuje funkce užité při validaci. Tyto funkce:

• zobrazují textovou chybu v tagu ‚span‘ s CSS třídou ‚form-error-message‘ vedle chybného controlu
• přidají chybnému controlu CSS třídu ‚form-control-error‘
• při odstranění chyby tyto změny odstraní

Máte samozřejmě možnost změnit zobrazení/skrytí chyb tak, že změníte ve vytvořené instanci třídy proměnné doAlert (pro zobrazení) a doRemove (pro skrytí; viz Nastavení níže). Můžete k tomu pochopitelně využít JavaScriptových knihoven jako jQuery, Prototype a dalších..

$script = new LiveClientScript($this->form);
$this->form->getRenderer()->setClientScript($script);

$script->doAlert = 'mojeZobrazChybuFunkce(validated_element, message)';
$script->doRemove = 'mojeSkryjChybuFunkce(validated_element)';
// jak vidíte můžete využít DOM objektu 'validated_element', tedy control, který chybu vyvolal
// a stringu 'message', tedy chybové hlášky

pozn.: změna oproti verzi 0.5 (bug fix) – v js používejte proměnnou ‚validated_element‘ místo ‚element‘ při zobrazení/skrytí chyby

Nastavení v Nette 0.9.x

Je možno měnit různá nastavení, které ovlivňují chování live validace:

• $doAlert – JavaScript kód obsluhující objevení chybové hlášky, když se vyskytne chyba (string)
• $doRemove – JavaScript kód obsluhující zmizení chybové hlášky, když je chyba opravena (string)
• $doAlertOnSubmit – JavaScript kód obsluhující upozornění po submitu formuláře, že existuje nějaká chyba (string; false vypne)
• $filledOnSubmit – validační operace Form::FILLED bude validovat pouze po submitu formuláře. (bool)
• $validateOnKeyUp – jestli se má prvek validovat po stisku klávesy (bool)
• $compressCode – zkomprimuje výsledný JS kód do jedné řádky (bool)

Zautomatizování v Nette 0.9.x

Pokud chcete tento způsob validace použít na více formulářích, lze si usnadnit nastavování Client Scriptu poděděním od AppForm a nastavit ho v contructoru:

class BaseForm extends AppForm
{
    public function __construct(IComponentContainer $parent = null, $name = null)
    {
        parent::__construct($parent, $name);
        $script = new LiveClientScript($this);
        $this->getRenderer()->setClientScript($script);

        $script->doAlert = 'mojeZobrazChybuFunkce(validated_element, message)';
        $script->doRemove = 'mojeSkryjChybuFunkce(validated_element)';
    }
}

Poté můžete vytvořit objekt třídy BaseForm s automatickou podporou pro Live validace (namísto obvyklého AppForm) a všechny tyto formuláře budou validovány live!

Připojené soubory

• liveformvalidation-0.9.zip 5 kB

---

Login to submit a comment