requestSubmit nabízí způsob, jak ověřit formulář před odesláním

HTML form prvky jsou základem pro interakce s webovými stránkami a za poslední roky se docela zlepšily. Dnes mohou vývojáři používat různé typy (number , tel , color , ...) a nastavte různé vstupní režimy (text , decimal , email , ...), abychom jmenovali pouze dva příklady.

Co zůstalo komplikované, bylo odesílání formulářů pomocí JavaScriptu. I když HTMLFormElement definuje submit nechová se tak, jak by se dalo očekávat.

Výchozí chování HTML a neodpovídající submit metoda

Předpokládejme, že máme následující HTML formulář:

<form action="">
  <label>
    Your name
    <input type="text" required>
  </label>
  <button>Submit</button>
</form>

A nějaký JavaScript:

document.querySelector('form')
  .addEventListener('submit', (event) => {
    // don't submit the form and
    // only log to the console
    event.preventDefault();
    console.log('submitted form');
  });

Když se klikne na submit tlačítka se stane následující:

  1. formulář je ověřen a jsou zobrazeny možné chyby
  2. Pokud ověření formuláře projde a formulář je platný, spustí se submit událost
  3. submit zavolá se handler a zabrání odeslání formuláře kvůli event.preventDefault()

Spuštěné submit událost poskytuje vývojářům způsob, jak reagovat na odeslání formuláře v JavaScriptu. A používá se hodně! Běžným scénářem je zabránit odesílání formulářů (preventDefault ) a zadávat požadavky AJAX na dynamické nahrazení obsahu stránky.

Co se ale stane, když odešlete formulář v JavaScriptu přes submit ?

document.querySelector('form').submit();

Odpověď zní – formulář je odeslán! (🤦‍♂️ duh!) Překvapivé je, že nedojde k ověření vstupu a formuláře a nebude tam submit událost . Všechny hodnoty polí jsou odeslány bez ohledu na to, zda jsou vstupy platné nebo ne.

Toto je neočekávané chování a mělo by se chovat jako stisknutí submit knoflík. Pro přeskočení ověření jistě existuje důvod, ale očekával bych, že submit také ověří formulář a pokračuje pouze v případě, že je vše platné.

Tento problém můžete obejít spuštěním click na tlačítku Odeslat. click poté spustí standardní chování, které uživatelé uvidí při interakci s formulářem, včetně ověření a spuštěného submit událost.

Napodobování uživatelského chování funguje dobře a to je skvělé, ale nikdy mi toto řešení nepřišlo jako elegantní. Ukázalo se, že existuje lepší způsob!

Nová metoda JavaScriptu, která ověřuje formuláře před odesláním

Na řešení tohoto chování začali lidé pracovat v červnu 2019 (návrh je zajímavé čtení). HTMLFormElement nyní obsahuje novou metodu nazvanou requestSubmit . A tato metoda dělá to samé jako kliknutí na submit knoflík. 🎉

Není v tom žádná magie – metoda JavaScriptu dělá to, co očekáváte a nabízí skvělé vychytávky HTML formuláře se standardně dodávají (včetně ověření formuláře). Musím říct – jsem z toho nadšený!

submit requestSubmit
nespouští submit událost spouští submit událost
nespouští ověření formuláře ověření formuláře spouštěče
nelze zrušit lze zrušit pomocí event.preventDefault v submit obsluha události

Podpora prohlížeče této metody od března 2021 je následující:

  • ✅ prohlížeče Chromium (nový Microsoft Edge, Chrome, Opera, ...)
  • ✅ Firefox
  • ❌ Safari (je zde requestSubmit polyfill k dispozici)

Aktualizace:Safari 16 se začíná dodávat requestSubmit takže brzy bude poskytnuta podpora napříč prohlížeči.

MDN Compat Data (zdroj)
Informace o podpoře prohlížeče pro requestSubmit()
76 76 79 75 75 16 16 12.0 76

Můžete si přečíst více o requestSubmit metodu na MDN, ponořte se do její specifikace nebo si ji prohlédněte v akci na CodePen.

Ve videu níže se můžete podívat na #devsheet vizualizující rozdíl.

Pokud si chcete přečíst další rychlé příspěvky TIL ("dnes jsem se naučil"), přihlaste se k odběru mého týdenního zpravodaje. 👋