Zimní výprodej C/C++ week
Pouze tento týden sleva až 80 % na e-learning týkající se C/C++
40 % bodů zdarma díky naší Zimní akci!

Diskuze: Scrolování na formulář, kde došlo k chybě

Aktivity (2)
Avatar
Adam Gajdečka:4.11.2018 9:54

Ahoj, jsem dost neznalý JS a programuji hlavně backend. Odešlu komentář, vrátí se mi případné errory, validační hlášky se propíšou k daným prvkům.

Uživatel ale formulář nevidí, protože je na konci stránky (typicky komentáře). Potřebuji tedy malý JS kód, který zkontroluje, zda nejsou nějaké errory a případně scrolluje na místo formuláře.

Backend - ASP .NET CORE 2.1

<div class="comment-box">
                  <h3>Leave A Comment:</h3>
                  <form asp-action="Details">
                      <div class="row">
                          <div class="col-md-6">
                              <input type="hidden" asp-for="Post.Id" />

                              <div class="test">  <span asp-validation-for="Comment.AuthorName"></span></div>
                              <input type="text" asp-for="Comment.AuthorName" placeholder="Your Name" />

                              <span asp-validation-for="Comment.Email"></span>
                              <input type="email" asp-for="Comment.Email" placeholder="Your Email" />

                              <span asp-validation-for="Comment.Url"></span>
                              <input asp-for="Comment.Url" placeholder="Your Website URL" />
                          </div>
                          <div class="col-md-6">
                              <span asp-validation-for="Comment.Content"></span>
                              <textarea asp-for="Comment.Content" rows="8" placeholder="Comment"></textarea>
                          </div>
                          <div class="col-md-12 text-right">
                              <button type="submit">Submit Comment</button>
                          </div>
                      </div>
                  </form>
              </div>

Zkusil jsem: to jsem někde vyhrabal, ale nefunguje to :-(

<script>

    window.scrollTo = function () { };
    validationSummary.onpropertychange = function () {
        if (this.style.display != 'none') {
            validationSummary.scrollIntoView();
        }
</script>
 
Odpovědět
4.11.2018 9:54
Avatar
Vladislav Ladicky:4.11.2018 10:06

To mi znie hlavne ako naprosto nevhodné ui/ux. Máš nejaké demo, alebo screenshoty?

 
Nahoru Odpovědět
4.11.2018 10:06
Avatar
Šimon Raichl
Překladatel
Avatar
Odpovídá na Adam Gajdečka
Šimon Raichl:4.11.2018 10:18

Spis je otazkou, proc tam mas onpropertychange event, ten ti nikdy nebude fungovat.

 
Nahoru Odpovědět
4.11.2018 10:18
Avatar
Odpovídá na Vladislav Ladicky
Adam Gajdečka:4.11.2018 10:21

proč by to mělo být nevhodné ui/ux? Zrovna jsem koupil tuto šablonu a vypadá to pěkně http://xerotheme.com/…/single.html

 
Nahoru Odpovědět
4.11.2018 10:21
Avatar
Odpovídá na Šimon Raichl
Adam Gajdečka:4.11.2018 10:21

to jsem někde našel na internetu, moc se v tom nevyznám, upřímně. Budu rád za radu. Díky

 
Nahoru Odpovědět
4.11.2018 10:21
Avatar
Odpovídá na Adam Gajdečka
Vladislav Ladicky:4.11.2018 10:44

Aha, už chápem, keď som to videl. Po odoslaní formulára sa môže nad nejakú položku vpísať chybová hláška, ale užívateľ ju neuvidí, lebo je nascrolovaný dole, na tlačítko Odoslať. Tak?

 
Nahoru Odpovědět
4.11.2018 10:44
Avatar
Odpovídá na Vladislav Ladicky
Adam Gajdečka:4.11.2018 10:46

Uživatel odešle formulář s neplatnými hodnotami. Server vrátí stránku s error hláškami, ale uživatel vidí obsah příspěvku, ale už nevidí formulář s komentářem, který napsal. Je potřeba zobrazit ten formulář, který je dole.

 
Nahoru Odpovědět
4.11.2018 10:46
Avatar
Odpovídá na Adam Gajdečka
Adam Gajdečka:4.11.2018 10:46

tedy scrollovat dolů

 
Nahoru Odpovědět
4.11.2018 10:46
Avatar
Pavel Mareš
Redaktor
Avatar
Pavel Mareš:4.11.2018 11:04

No tohle je nevhodné UX. Mnohem lepší řešení je AJAX - https://www.sanwebe.com/…using-jquery (třeba). Díky tomu uživatel zůstane na místě a ty si na backend můžeš hrát jak chceš a zpět pošleš vždycky jen info zda dobře / špatně.

Když ti pak user zakáže JS, tak to bude fungovat jak normální formulář, pokud to vymyslíš dobře.

Nahoru Odpovědět
4.11.2018 11:04
Však ono půjde ...
Avatar
Odpovídá na Adam Gajdečka
Vladislav Ladicky:4.11.2018 11:32

Nie je treba nikam scrollovať. Moderné UI to rieši tak, že ak aj validácia polí prebieha na serveri, z frontendu to máš odoslať AJAXom. Čiže ak napríklad vyplním formulár a kliknem na odoslať, obsah formulára sa odošle AJAXom na backend na kontrolu a z backendu sa vráti odpoveď, či je všetko OK. Toto však celé prebieha na pozadí, na frontende užívateľ ostáva tam, kde bol. A len mu v prípade, že je všetko v poriadku vypíšem toast, že formulár bol úspešne odoslaný a vynulujem zároveň všetky polia, alebo v prípade neúspechu mu vypíšem toast, že si má skontrolovať formulár, v ktorom mu zároveň zvýrazním vadné polia. Takto sa to robí. Scroll na chybu sa nepoužíva, aj by bol v tvojom prípade zložitý, keďže odoslaním formulára opustíš vyplnenú stránku. Čiže ... zakúpená téma je v poriadku, ale UX bude hrozné, ak tam implementuješ validáciu polí spôsobom nad ktorým uvažuješ.

 
Nahoru Odpovědět
4.11.2018 11:32
Avatar
Odpovídá na Vladislav Ladicky
Adam Gajdečka:4.11.2018 11:37

dobře, ale jak to mám udělat? Nějaký návod?

 
Nahoru Odpovědět
4.11.2018 11:37
Avatar
Odpovídá na Adam Gajdečka
Vladislav Ladicky:4.11.2018 11:45

Tak ako nadškrtol Pavel Mareš, v tvojom prípade bude asi najjednoduchšie použiť jQuery. Už si ho použil? Vieš jQuery?

 
Nahoru Odpovědět
4.11.2018 11:45
Avatar
Odpovídá na Vladislav Ladicky
Adam Gajdečka:6.11.2018 17:59

použil, ale neumím jej.

 
Nahoru Odpovědět
6.11.2018 17:59
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Adam Gajdečka
Vladislav Ladicky:6.11.2018 21:04

Bohužiaľ, jediná možnosť je naštudovať to. To nie je dnes už žiadna voliteľná funkcionalita, to je nevyhnutnosť každého rozumného UI

 
Nahoru Odpovědět
6.11.2018 21:04
Avatar
Odpovídá na Vladislav Ladicky
Adam Gajdečka:3.3.2019 10:13

ano, máte pravdu. Proto jsem se začal v prosinci učit React JS. V dnešní době je potřeba dělat webové stránky s co nejlepším UX.

 
Nahoru Odpovědět
3.3.2019 10:13
Avatar
Vladislav Ladicky:3.3.2019 10:17

No ... nevedieť ešte poriadne JS a pustiť sa rovno do React je smelý plán, ale na druhej strane to ničomu neuškodí. Nech sa teda darí. PS: ja som skôr Vue pozitívny

 
Nahoru Odpovědět
3.3.2019 10:17
Avatar
Odpovídá na Vladislav Ladicky
Adam Gajdečka:3.3.2019 10:27

Mě byl vždy klasický JS proti srsti. A React JS je super, aktuálně jsou to 4 měsíce, co v něm dělám denně na novém projektu. Nejprve to šlo pomalu, teď už je to daleko snadnější :-)

Když člověk umí programovat, tak vstup do jiného jazyka není tak problematický. Už dokážu vytvářet i složité formuláře s validací apod. Je to super :-)

 
Nahoru Odpovědět
3.3.2019 10:27
Avatar
Odpovídá na Adam Gajdečka
Vladislav Ladicky:3.3.2019 13:25

A chápeš už čo z toho vyplýva? Že JS ti nemôže byť proti srsti, ale že je super? Keďže je pre Teba React super, čo je len a len JS framework? A o to ide. JS je pecka jazyk. Záleží len na tom ako ho ovládaš a ako si zorganizuješ kód. A to je dôvod, prečo som sa pozrel do Reactu, Angularu, aj Vue, a vybral si Vue práve pre jeho najprehľadnejší kód. Nič proti React. Ani fň. Len mi proste viac sadlo Vue.

 
Nahoru Odpovědět
3.3.2019 13:25
Avatar
Odpovídá na Vladislav Ladicky
Adam Gajdečka:3.3.2019 13:32

mi JS vadil, protože vždy to byl šílený bordel v kódu. Tudíž, když se teď generuje html pomocí JS, tak je to krásné.

Já si vybral React, jelikož je o něm dost slyšet. Asi ani jeden z těch frameworků nebude úplně špatná varianta :-)

 
Nahoru Odpovědět
3.3.2019 13:32
Avatar
Odpovídá na Vladislav Ladicky
David Klouček:4.3.2019 19:55

JS neni super, vzhledem k tomu, kolik má WTF např. oproti C#.

 
Nahoru Odpovědět
4.3.2019 19:55
Avatar
Ilja Židkov
Člen
Avatar
Odpovídá na David Klouček
Ilja Židkov:4.3.2019 22:41

JS neni super...

Není pravda. JavaScript oproti C# je dynamický jazyk, což je asi něco jako "dobrý sluha, zlý pán". Navíc díky ES6 a TypeScriptu můžeš psát kód, který je skoro identický C#.

kolik má WTF...

Kolik přesně? Celý JavaScript je postaven na prototypech a přirozené schopnosti delegace úloh (callbacky). Žádné přetížení operátorů, žádné třídy, žádná rozhraní.

Ano, C# je vynikající jazyk, ale, v roce 2019 ignorovat JavaScript je sebeokrádání o spoustu možností.

 
Nahoru Odpovědět
4.3.2019 22:41
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na Ilja Židkov
Peter Mlich:5.3.2019 7:33

V JS tridy funguji, jen to musis spravne zapsat. A tusim novy js umoznuje i deklarovani pres class.

function aaa()
{
this.a = 1;
this.b = 2;
this.c = function () {alert(3);}
}
x = new aaa();
alert(x.b);
x.c();

c = {a:1, b:2, c:function() {alert(3)}};
alert(c.b);

d = {};
d.a = 1;
d.c = function() {alert(3)}

Ale jako pole c, d, se to neda pouzit opakovane. Obvykle ale tridu deklarujes jednou, pokud se nejedna o nejake struktury.

Adam Gajdečka - Js se da vkladat jako externi source. Do html kodu ho obvykle nemicham. A spousta lidi se ted orientuje na exoticke jazyky jako react a podobne (na root.cz bezi clanky treba o 'go'). To je ok. Je treba, aby to nekdo osahal a rekl, co je na tom dobre a co spatne.
Generovat stranky cele pres js muze byt take dobra volba. At uz u klienta nebo na strane serveru. Nemam vyzkouseno.

 
Nahoru Odpovědět
5.3.2019 7:33
Avatar
Ilja Židkov
Člen
Avatar
Odpovídá na Peter Mlich
Ilja Židkov:5.3.2019 10:11

V JS tridy funguji, jen to musis spravne zapsat.

Hraní se slovy. V JS třída NEEXSTIUJE. Proč pak neexstijí modifikátory přístupu private, protected nebo public? Class je tzv. "syntaktický cukr" pro konstrukor funkci.

A tusim novy js umoznuje i deklarovani pres class.

Ano, tomu jsem věnonval předchozí odpověď (článek). viz.:

Navíc díky ES6 a TypeScriptu můžeš psát kód, který je skoro identický C#.

 
Nahoru Odpovědět
5.3.2019 10:11
Avatar
Odpovídá na Ilja Židkov
Vladislav Ladicky:5.3.2019 17:01

A čo má byť? Že v JS class neexistuje? Že je objektový, ale založený na prototype chain? Zas tu deti čo poznajú jediný jazyk a jedinú paradigmu rozbiehajú flame o tom, o čom dohromady nič nevidia? Zrovnávaním hrušiek s jablkami? C# je C#, JS je JS, bodka. Takýchto sračiek - flame, zrovnaní a hejtu je plný internet. Vyhnite sa tomu aspoň tu. Ďakujem.

 
Nahoru Odpovědět
5.3.2019 17:01
Avatar
Ilja Židkov
Člen
Avatar
Odpovídá na Vladislav Ladicky
Ilja Židkov:6.3.2019 7:42

Zrovnávaním hrušiek s jablkami?

Ano, doteď existuje spousta vývojářů, kteří si myslí, že Java a JavaScript je to stejné. A právě proto, jsem zdůraznil fakt, že v JS třídy NEEXISTUJÍ.

Takýchto sračiek - flame, zrovnaní a hejtu je plný internet...

Ano, a právě proto jsem popřel neplatný argument Petra, abych předešel nesrovnalostem a "flamu".

Více o třídách na Mozilla Developer Network

 
Nahoru Odpovědět
6.3.2019 7:42
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na Ilja Židkov
Peter Mlich:6.3.2019 12:05

Ja bych dalsi komenty presunul sem...
https://www.itnetwork.cz/…c7fa965665e2

 
Nahoru Odpovědět
6.3.2019 12:05
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 26 zpráv z 26.