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

Adam Gajdečka

Člen

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

Člen

: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

Šimon Raichl

Tvůrce

Š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

Adam Gajdečka

Člen

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

Adam Gajdečka

Člen

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

Člen

: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

Adam Gajdečka

Člen

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

Adam Gajdečka

Člen

Adam Gajdečka:4.11.2018 10:46

tedy scrollovat dolů

Nahoru Odpovědět

4.11.2018 10:46

Pavel Mareš

Tvůrce

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 ...

Člen

: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

Adam Gajdečka

Člen

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

Člen

: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

Adam Gajdečka

Člen

Adam Gajdečka:6.11.2018 17:59

použil, ale neumím jej.

Nahoru Odpovědět

6.11.2018 17:59

Člen

: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

Adam Gajdečka

Člen

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

Člen

: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

Adam Gajdečka

Člen

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

Člen

: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

Adam Gajdečka

Člen

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

David Klouček

Člen

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

Ilja Židkov

Člen

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

Peter Mlich

Člen

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

Ilja Židkov

Člen

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

Člen

: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

Ilja Židkov

Člen

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

Peter Mlich

Člen

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