[2010–08–09] Unobtrusive JavaScript namísto InstantClientScript
- David Grudl
- Nette Core | 8212
Připravuju aktualizaci formulářů, jejichž součástí bude podpora HTML 5 prvků a čistější přístup k validaci na straně klienta. Zcela zmizí generovaný JavaScript a bude nahrazen za tzv. unobtrusive JavaScript.
Princip je ten, že validační pravidla se zapíší do uživatelských HTML
atributů (prefix data-) a podle nich se bude samotná validace
řídit. Na programátora se tak přesouvá nutnost validační skript
zaincludovat
do stránky, tj. pokud žádný skript nezavolá, na straně
klienta se nebude validovat. Tj. aby validace fungovala jako doposud, je třeba
do stránky vložit skript netteForms.js, který zatím najdete
v adresáři examples/forms.
Tím se veškeré chování dostává mimo PHP a mizí tak ošklivá třída InstantClientScript nebo metoda setClientScript() rendereru.
K vidění v poslední revizi. Samozřejmě to je pracovní verze, ještě zbývá dost práce.
- PaBi3
- Bronze Partner | 62
A ešte jedna chyba. Pokiaľ použijem apostrof v nejakom pravidle, napr:
...->addRule(Form::FILLED, "Field 'e-mail' must be filled.")...
Výsledok sa neescapuje, čo vedie k tomuto:
http://img530.imageshack.us/i/rule.png/
Editoval PaBi3 (11. 8. 2010 17:00)
- PaBi3
- Bronze Partner | 62
Je tu ešte problém, že formulár načítaný cez AJAX sa nevaliduje. Riešením je napr. upraviť jquery addon takto:
updateSnippet: function (id, data) {
$("#" + id).html(data).find("form").each(function () {
nette.initForm($(this).get(0));
});
},Editoval PaBi3 (12. 8. 2010 16:07)
- ic
- Člen | 430
David Grudl napsal(a):
To spíš používáš špatný minimalizátor. Skript mi všude funguje.
Vážně to funguje?
protože tohle mi projde vpohodě
var nette = nette || { };
nette.getValue = function(elem) {/* ... */}
nette.validateControl = function(elem, rules, onlyCheck) {/* ... */}ale na tohle
nette = nette || { };nette.getValue = function(elem) {/* ... */}nette.validateControl = function(elem, rules, onlyCheck) {/* ... */}mi firefox povídá Error: missing ; before statement a
označuje místo před nette.validateControl dokud tam ten
středník nedám.
EDIT: ten minimalizátor by rozhodně mohl být chápavější a nechat tam třeba mezeru, ale to by musel poznat o jakou strukturu jde.
Editoval ic (20. 8. 2010 13:58)
- David Grudl
- Nette Core | 8212
Středníky jsem tam přidal, ale stejně jde o chybu minimalizátoru. Zkus použít nějaký chytřejší, třeba Google Compiler.
- Ondřej Mirtes
- Člen | 1536
netteForms.js mi nefunguje – i při vyplněném prvku mi skáče alert, že je potřeba ho vyplnit :( Myslel jsem, že to bude zase nějakou minifikující zhůvěřilostí nebo nějakým jiným skriptem – škůdcem, ale dělá mi to i na čistém skeletonu.
- Milo
- Nette Core | 1283
Ehm, no nic. Tak jsem si všimnul, že na GIThubu je to už vyřešené.
Ondřej Mirtes napsal(a):
netteForms.js mi nefunguje – i při vyplněném prvku mi skáče alert, že je potřeba ho vyplnit :( Myslel jsem, že to bude zase nějakou minifikující zhůvěřilostí nebo nějakým jiným skriptem – škůdcem, ale dělá mi to i na čistém skeletonu.
netteForms.js porovnává název pravidla jako
case ':filled': ale hodnota atributu je
data-nette-rules="{op:':Filled',msg:'Title must be set'}".
lowercase vs. uppercase
Editoval Milo (26. 8. 2010 12:42)
- Čelo
- Člen | 42
Když mám vytvořenou Rule s vlastním validatorem, tak se mi přidá do seznamu na validaci v JS a pak mi nejde při zapnutém JS formulář odeslat (neustále hlásí nesplnění pravidla). Pomohlo mi přidat vlastní podmínku, ale nebylo by možné v případě, že pravidlo neexistuje nevyhazovat neustále hlášku o nesplnění a nechat validaci jen na stranu serveru nebo mít možnost vyžádat si vynechání validace na straně uživatele?
- Vyki
- Člen | 388
to ->setValidationScope(false) mi nefunguje porad
EDIT: Tak jsem zjistil, že to nefunguje pouze ve spojeni s Nette ajax forms
EDIT: Trochu jsem na to koukal a vypadá to tak, že Nette ajax forms a nový netteForms nelze použít kvůli volání událostí zároveň. Když se to odešle tak ajax forms zastaví událost onclick, takže se vůbec v netteForms nezjistí jakým tlačítkem se to odeslalo
<script>
nette.initForm = function(form) {
form.onsubmit = function(){
return nette.validateForm(form);
};
form.onclick = function(e) { /*Tato fce callbacku se nikdy nevyvolá, protože Nette ajax form jí v eventu zastaví*/
e = e || event;
var target = e.target || e.srcElement;
form['nette-submittedBy'] = (target.type in {submit:1, image:1}) ? target.name : null;
};
</script>Nevím jak to jednoduše vyřešit, v JS nejsem moc silnej.
Editoval Vyki (8. 9. 2010 16:23)
- Martin Mates
- Člen | 179
Vypadá to, že netteForms.js nefunguje pokud je formulář odeslán inputem typu image.
js error:
form.elements[form['nette-submittedBy']] is undefined
Editoval Martin Mates (14. 9. 2010 17:15)
- SyXcz
- Člen | 75
divný ale když načítám netteForms.js v hlavičce, mam celou bílou stránku, zdroj tam mam, ale jakoby se uplně celej zdroj zakomentoval… ani titulek se mi nenačte… a když js načtu na konci stránky (před /body) tak hlásí chybu:
<script>
uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLBodyElement.appendChild]" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: http://localhost/syxcz/root/ :: anonymous :: line 116" data: no]
</script>mno asi zatim vypustim js validaci a použiju jí až bude OK, zatim mi musí stačit obyč validace ve form errors
Editoval SyXcz (31. 10. 2010 1:59)