# 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
<!-- 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
// 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

```javascript
// 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