preventDefault přeskočí HTML5 validaci formuláře

import { Aside } from ‘@astrojs/starlight/components’;

U každého submit handleru s `preventDefault` přidej explicitní validaci (`checkValidity()` nebo vlastní) **předtím**, než zavoláš fetch.

Symptom

Po kliku na „Odeslat” vyskočí chyba typu Missing required fields: A, B, C… se všemi poli najednou, i když uživatel část vyplnil. Chyba je často anglická navzdory lokalizovanému UI. Reprodukovatelné hlavně u anonymního uživatele bez autofillu.

Root cause

Submit handler volá e.preventDefault() hned na prvním řádku → prohlížeč nikdy nespustí nativní HTML5 validaci (required, type=email, minlength). new FormData(form) pak vrátí prázdné stringy a backend vrátí generickou chybu se všemi poli.

form.addEventListener('submit', async (e) => {
  e.preventDefault();           // ← vypne browser default = SKIP HTML5 validace
  const fd = new FormData(form); // ← prázdné "" pro nevyplněná required pole
  await fetch('/api/...', { body: JSON.stringify(fromFd(fd)) });
});

Bonus: jedno kontaktní pole (telefon) nemělo required, na rozdíl od ostatních.

Fix

Validuj před odesláním. Buď nech validovat prohlížeč:

e.preventDefault();
if (!form.checkValidity()) { form.reportValidity(); return; }

nebo vlastní validace s konkrétní lokalizovanou zprávou + scroll/focus na první prázdné pole:

const missing = [];
if (!firstName.value.trim()) missing.push({ id: 'firstName', label: 'Jméno' });
if (!email.value.trim())     missing.push({ id: 'email',     label: 'E-mail' });
if (missing.length) {
  const el = document.getElementById(missing[0].id);
  el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
  el?.focus();
  showToast(`Vyplňte prosím: ${missing.map(m => m.label).join(', ')}`);
  return;
}

Jak se tomu vyvarovat v jiných systémech

• Detection: grepni preventDefault() na prvním řádku submit handleru a ověř, že níže je explicitní validace.
• Anti-pattern: <form> s required atributy + JS handler, který je nikdy nepoužije (dead validace).
• Lepší přístup: schema-driven validace (zod/valibot) sdílená mezi klientem a serverem = jediný zdroj pravdy.

Sister bugs / související

• Zapomenutý CSRF token v custom handleru (viz Bezpečnost).
• Dvojí submit bez button.disabled = true.
• Lokalizované UI zobrazí surovou serverovou chybu.