3I_WTL_2025/08_js_form

08 - JavaScript a Formuláře

🎯 Co se naučíte

V této lekci se naučíte pracovat s formuláři v JavaScriptu - validace, odeslání, manipulace s daty.

📚 Témata lekce

• Formulářové elementy (input, textarea, select, checkbox, radio)
• Validace formulářů s JavaScriptem
• event.preventDefault() - zabránění odeslání formuláře
• Čtení hodnot z různých typů inputů
• Kontrola povinných polí
• Regex (základy) - kontrola formátu emailu, telefonu
• Visual feedback - zobrazení chyb uživateli

📂 Soubory v projektu

• index.html - HTML formulář
• js/ - JavaScript soubory pro validaci

💻 Ukázka z lekce

<!-- HTML -->
<form id="myForm" onsubmit="return validateForm()">
    <input type="text" id="jmeno" required>
    <input type="email" id="email" required>
    <button type="submit">Odeslat</button>
</form>
<p id="error"></p>

// JavaScript
function validateForm() {
    let jmeno = document.getElementById("jmeno").value;
    let email = document.getElementById("email").value;

    if (jmeno === "") {
        document.getElementById("error").innerHTML = "Jméno je povinné!";
        return false;  // zabrání odeslání
    }

    // Regex pro email
    let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        document.getElementById("error").innerHTML = "Neplatný email!";
        return false;
    }

    return true;  // formulář se odešle
}

🚀 Jak s lekcí pracovat

1. Otevřete index.html v prohlížeči
2. Vyzkoušejte odeslat formulář s prázdnými poli
3. Sledujte validační zprávy
4. Prozkoumejte JS kód - jak funguje validace
5. Zkuste přidat další validace (délka hesla, shoda hesel)
6. Použijte console.log() pro debugování

💡 Tip pro studenty

• return false v onsubmit zabrání odeslání formuláře
• event.preventDefault() je modernější způsob zabránění odeslání
• required atribut v HTML je první úroveň validace (HTML5)
• JavaScript validace je důležitá pro pokročilejší kontroly
• Regex (regulární výrazy) jsou mocný nástroj pro validaci formátů
• Vždy validujte i na serveru - JavaScript validace lze obejít

🔍 Užitečné Regex vzory

// Email
/^[^\s@]+@[^\s@]+\.[^\s@]+$/

// Telefon (CZ formát)
/^(\+420)?[0-9]{9}$/

// Heslo (min 8 znaků, velké, malé, číslo)
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/

// Poštovní směrovací číslo
/^[0-9]{3}\s?[0-9]{2}$/

🔗 Související lekce

• Předchozí: 07_js_css_dom - manipulace s CSS
• Související: AI/ai_03_form_validation - pokročilá validace s addEventListener
• Další: 11_json - práce s JSON daty