Vánoční nadílka Vánoční nadílka
Vánoční akce! Daruj lepší budoucnost blízkým nebo sobě. Až +50 % zdarma na dárkové poukazy. Více informací

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

JavaScript JavaScript Scrolování na formulář, kde došlo k chybě American English version English version

Aktivity (1)
Avatar
Adam Gajdečka:4. listopadu 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. listopadu 9:54
Avatar
Vladislav Ladicky:4. listopadu 10:06

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

 
Nahoru Odpovědět 4. listopadu 10:06
Avatar
Šimon Raichl
Redaktor
Avatar
Odpovídá na Adam Gajdečka
Šimon Raichl:4. listopadu 10:18

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

 
Nahoru Odpovědět 4. listopadu 10:18
Avatar
Odpovídá na Vladislav Ladicky
Adam Gajdečka:4. listopadu 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. listopadu 10:21
Avatar
Odpovídá na Šimon Raichl
Adam Gajdečka:4. listopadu 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. listopadu 10:21
Avatar
Odpovídá na Adam Gajdečka
Vladislav Ladicky:4. listopadu 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. listopadu 10:44
Avatar
Odpovídá na Vladislav Ladicky
Adam Gajdečka:4. listopadu 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. listopadu 10:46
Avatar
Odpovídá na Adam Gajdečka
Adam Gajdečka:4. listopadu 10:46

tedy scrollovat dolů

 
Nahoru Odpovědět 4. listopadu 10:46
Avatar
Pavel Mareš
Redaktor
Avatar
Pavel Mareš:4. listopadu 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. listopadu 11:04
Však ono půjde ...
Avatar
Odpovídá na Adam Gajdečka
Vladislav Ladicky:4. listopadu 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. listopadu 11:32
Avatar
Odpovídá na Vladislav Ladicky
Adam Gajdečka:4. listopadu 11:37

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

 
Nahoru Odpovědět 4. listopadu 11:37
Avatar
Odpovídá na Adam Gajdečka
Vladislav Ladicky:4. listopadu 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. listopadu 11:45
Avatar
Odpovídá na Vladislav Ladicky
Adam Gajdečka:6. listopadu 17:59

použil, ale neumím jej.

 
Nahoru Odpovědět 6. listopadu 17:59
Avatar
Odpovídá na Adam Gajdečka
Vladislav Ladicky:6. listopadu 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. listopadu 21:04
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 14 zpráv z 14.