[2010–08–09] Unobtrusive JavaScript namísto InstantClientScript

před 7 lety

David Grudl
founder | 6706
+
0
-

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.

před 7 lety

Cifro
Člen | 245
+
0
-

Pekne :) Už tu boli dotazy na to, tak teraz je to aj realizované.

Ešte takto spraviť s ajaxom (viď hneď moj druhý post v odkazovanom vlákne) a bude to na jedničku.

před 7 lety

Honza Marek
Člen | 1674
+
0
-

Super!

před 7 lety

PaBi3
Člen | 65
+
0
-

Nefunguje ...->setValidationScope(false).

před 7 lety

PaBi3
Člen | 65
+
0
-

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)

před 7 lety

Panda
Člen | 570
+
0
-

Zkusil jsem to opravit: https://github.com/…b88b949dfa0f.

před 7 lety

David Grudl
founder | 6706
+
0
-

setValidationScope a apostrofy by měly fungovat

před 7 lety

PaBi3
Člen | 65
+
0
-

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)

před 7 lety

ic
Člen | 413
+
0
-

V tom javascriptu co je v examples / forms schází několik středníků aby mohl script fungovat i po projetí nějakým js minimalizátorem co z toho udělá jednořádkový scriptík.

před 7 lety

David Grudl
founder | 6706
+
0
-

To spíš používáš špatný minimalizátor. Skript mi všude funguje.

před 7 lety

ic
Člen | 413
+
0
-

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)

před 7 lety

David Grudl
founder | 6706
+
0
-

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.

před 7 lety

ic
Člen | 413
+
0
-

Pracuje na tom ‚cssmin.php – A simple CSS minifier‘ který se dá pohodlně použít s webloaderem… mohl by být méně simple ale zatím to nedělalo problémy a jsem rád že nemusím hledat jiný. Moc dík

před 7 lety

Panda
Člen | 570
+
0
-

Nechci rýpat, ale není trochu divné používat na zmenšování JavaScriptu něco, co má v názvu „CSS“ a v popisu „CSS minifier“? :-)

před 7 lety

Ondřej Mirtes
Člen | 1539
+
0
-

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.

před 7 lety

ic
Člen | 413
+
0
-

Panda napsal(a):

Nechci rýpat, ale není trochu divné používat na zmenšování JavaScriptu něco, co má v názvu „CSS“ a v popisu „CSS minifier“? :-)

Vůbec jsem si nevšiml jakou blbost jsem napsal XD. Na javasctipt mám JavaScriptPacker. Cssmin je tam taky ale teda na něco jinýho XD

před 7 lety

Milo
Moderator | 1031
+
0
-

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)

před 7 lety

Čelo
Člen | 40
+
0
-

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?

před 7 lety

David Grudl
founder | 6706
+
0
-

fixed

před 7 lety

Vyki
Člen | 391
+
0
-

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)

před 7 lety

Martin Mates
Člen | 182
+
0
-

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)

před 7 lety

redhead
Člen | 1315
+
0
-

Bylo myslím opraveno, stáhni novou verzi z GitHub.

před 7 lety

SyXcz
Člen | 76
+
0
-

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)