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

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

Ukázka

Instalace

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

Použití

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 InstantClientScrip­t, 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í/skry­tí chyby

Nastavení

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í

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