InstantClientScript & validate{name}

Oba problémy jsem prozatím vyřešil pomocí vlastního renrederu…

<?php
    /**
     * Initializes form.
     * @return void
     */
    protected function init()
    {
        parent::init();
        FormControl::$idMask = 'frm-' . $this->form->getParent()->getUniqueId() . '-%s-%s';
    }

    /**
     * Returns JavaScript handler.
     * @return mixed
     */
    public function getClientScript()
    {
        if ($this->clientScript === TRUE) {
            $this->clientScript = new InstantClientScript($this->form);
            $name = $this->form->getParent()->getUniqueId() . Form::NAME_SEPARATOR . $this->form->getName();
            $name = ucfirst(strtr($name, Form::NAME_SEPARATOR, '_'));
            $this->clientScript->validateFunction = 'validate' . $name;
        }
        return $this->clientScript;
    }
?>

Ale stejně si myslím, že by bylo lepší to řešit nějak systémově v Nette.

Myslíš…toto? :-)
řešit DG

ještě mi není jasné, kde se tohle volá?

/**
 * Initializes form.
 * @return void
 */
protected function init()
{
    parent::init();
    FormControl::$idMask = 'frm-' . $this->form->getParent()->getUniqueId() . '-%s-%s';
}

to v podstatě změní způsob tvorby formulářů úplně všude ne? nejen v rámci toho jednoho formuláře, teda asi je to v pořádku no, ale to dáváš kam tedy? do basepresenteru?

Chceš říct, že kvůli tomu je opravdu nutné dědit render a každému formu nastavovat render? To to můžu strčit do basepresenteru a je ne?

Každopádně ještě si říkám, že pokud nějaký javascript očekává nějaké konzistentní názvy ideček, tak by unikátní název mohl být docela problém??

mcmatak napsal(a):

Chceš říct, že kvůli tomu je opravdu nutné dědit render a každému formu nastavovat render? To to můžu strčit do basepresenteru a je ne?

Můžeš si to strčit do BaseFormu. Kvůli $this->form->getParent()->getUniqueId() to nejde dát do BasePresenteru, pač to má v každém formu jinou hodnotu.

takže ok, už sem pochopil jak by byl ten hack, ten tedy funguje! a to samozřejmě za podmínky, že si jednotlivé komponenty pojmenovávám jinak

<?php

	public function createComponent($name) {
		if (preg_match("/^loginForm\_/", $name)) {
			return new LoginControl($this, $name);
		if (preg_match("/^addToBasket/", $name)) {
			return new addToBasket($this, $name);
		} else {
			return parent::createComponent($name);
		}
	}


a potom používám jako

{control addToBasket1}
{control addToBasket5}
{control addToBasket56}
{control addToBasket3}

{control loginForm_Quick}
{control loginForm_Page}

?>

a samořejmě za podmínky, že form má nastavený renderer na můj vlastní viz. ten hack odkaz

Editoval mcmatak (5. 11. 2009 16:16)

jelikož s tím stále bojuji, zjistil jsem, že idečka komponent se při xificurkově řešení nějak zpožďují, až při druhém renderování stejné komponenty dojde k úpravě ideček

jediné co pomohlo je toto řešení

<?php
class BaseForm extends AppForm {
	public function  __construct(IComponentContainer $parent = null, $name = null) {
		parent::__construct($parent, $name);
		FormControl::$idMask = 'frm-'.$this->getParent()->getUniqueId().'-%s-%s';
		$this->setRenderer(new BaseConventionalRenderer());
	}
}

    /**
     * Initializes form.
     * @return void
     */
    protected function init()
    {
        parent::init();
    }

    /**
     * Returns JavaScript handler.
     * @return mixed
     */
    public function getClientScript()
    {
        if ($this->clientScript === TRUE) {
            $this->clientScript = new InstantClientScript($this->form);
            $name = $this->form->getParent()->getUniqueId() . Form::NAME_SEPARATOR . $this->form->getName();
            $name = ucfirst(strtr($name, Form::NAME_SEPARATOR, '_'));
            $this->clientScript->validateFunction = 'validate' . $name;
        }
        return $this->clientScript;
    }


?>

při zapsání té změny FormControl do rendereru je už pozdě, nevím čím to je, ale dělá mi to tak vždycky

podle mne jediné řešení je

nahradit ve FormControl

<?php
	/**
	 * Returns control's HTML id.
	 * @return string
	 */
	public function getHtmlId()
	{
		if ($this->htmlId === FALSE) {
			return NULL;

		} elseif ($this->htmlId === NULL) {
			$this->htmlId = sprintf(self::$idMask, "-".$this->getForm()->getParent()->getUniqueId()."-".$this->getForm()->getName(), $this->getHtmlName());
			$this->htmlId = str_replace(array('[', ']'), array('-', ''), $this->htmlId);
		}
		return $this->htmlId;
	}
?>

David Grudl napsal(a):

…

Bohužel InstantClientScript neřeší problém, kdy mám ve dvou různých komponentách formuláře stejného jména a do HTML se mi tak duplikují ID atributy.

P.S. Čímž nepopírám užitečnost změny InstantClientScriptu.

David Grudl napsal(a):

Nechcete někdo zkusit napsat takový ukázkový JavaScript? Podle něj bych pak přepsal InstantClientScript.

Nejlepší ukázkový javascript bude asi jQuery Validation plugin ;) Kdyby se Nette zvládlo s tímhle skamarádit, tak by to bylo fakt hodně dobré.

Editoval Honza Marek (24. 11. 2009 23:46)

Jen drobná ukázka pro inspiraci, jak by šlo propojit aktuální InstantClientScript s jQuery a vytvořit plnohodnotnou live validaci:

Natáhneme jQuery a formulář zobrazíme klasickou cestou:

<script src="jquery.js"></script>
<?php echo $form ?>

Vytvořím obslužný skript pro live validaci:

var liveValidate = function(event) {
	var error = nette.validateControl(this);
	if (error) { // došlo k chybě, error obsahuje chybovou zprávu
		$(this).after(error); // nějak ji umístíme za položu
	} else {
		// bez chyby, zpravu nějak zrušíme
	}
}

A nakonec všem prvkům, které mají nějaká validační pravidla, nastavíme pomocí jQuery obsluhu vhodných události:

var form = document.forms[0]; // form bude náš formulář

for (var i in nette.getFormValidators(form)) {
	$(form[i]).change(liveValidate).blur(liveValidate).keyup(liveValidate);
}

Výhoda tohoto řešení je v tom, že není potřeba nic konfigurovat na straně aplikace, přesněji řečeno není potřeba zasírat presentery JS kódem.

stačilo by tohle viz tento článek

vyzkoušel jsem a funguje to fakt pěkně, ovšem pár připomínek:

1) BUG

Nějakým způsobem se tam pomíchají value a regulární výraz u REGEX operací, firebug hlásí:

nette.getValue(form.user).test is not a function

renderuje se tam místo RegExpu funkce nette.getValue..

BUG FIX

			//InstantClientScript.php	line: 232
			return "res = $arg.test(val);";

2. co se týče Live Form Validace, tak je tam nepatrný rozdíl, který asi jednoduše překódovat nepůjde a to, že například při validaci 1. hesla se validuje i 2. heslo (pokud už s ním uživatel něco dělal – kliknul, napsal, …). Polopatě: změním 1. heslo (napíšu špatně své heslo), pak 2. heslo (napíšu dobře své heslo) ⇒ 2. bude hlásit že se neshodují, když změním 1. heslo na to správné, 2. bude stále hlásit že se neshodují. Doufám, že je to srozumitelné :D . Já to řešil tak, že jsem pro každou operation condition volal validaci i odkazovaných controlů
3. a mám ještě návrh oddělit funkci na zobrazení/skrytí chyby do svého „uložiště“:

<script>
nette.validateForm = function(sender) {
	var form = sender.form || sender;
	var validators = this.getFormValidators(form);
	for (var name in validators) {
		var error = validators[name](sender);
		if (error) {
			this.onError(form[name], error)		//NEW
			return false;
		} else {					//NEW
			this.onHideError(form[name])
		}
	}
	return true;
}
//funkce
nette.onError = function(control, error) {
	alert(control);
	control.focus();
}
nette.onHideError = function(control) { }
</script>

Tyhle funkce se pak dají snadněji měnit pouze přepsáním té funkce.. A v IE by se měl focus volat po alertu, protože to evidentně nechápe.

Fix David commitoval, aspoň co mi to posílal, ale nezkoušel jsem, zkus novou nightly build