Chapter 35 — Forms & Validation

Bu bobda formalar bilan ishlash va foydalanuvchi kiritgan ma'lumotni tekshirish (validatsiya)ni chuqur o'rganamiz — bu deyarli har qanday veb-loyihada zarur bo'ladigan amaliy ko'nikma.

---

35.1 Forma elementlariga kirish

Simple Explanation

Forma ichidagi elementlarga (input, select, textarea) turli usullar bilan kirish mumkin.

Example

index.html
HTMLNusxalash
01<form id="loginForm">
02    <input type="text" id="username" name="username">
03    <input type="password" id="password" name="password">
04    <button type="submit">Kirish</button>
05</form>

script.js
JavaScriptNusxalash
01let form = document.getElementById("loginForm");
02 
03// Usul 1 — alohida ID orqali
04let username = document.getElementById("username").value;
05 
06// Usul 2 — forma orqali, name atributi bilan
07let username2 = form.elements["username"].value;

💡 Key Idea
form.elements — forma ichidagi barcha inputlarga, ularning name atributi orqali kirish imkonini beradi. Bu usul ayniqsa ko'p inputli katta formalarda qulay.

35.2 To'liq forma yuborish jarayoni

Example

index.html
HTMLNusxalash
01<form id="loginForm">
02    <input type="text" id="username" placeholder="Foydalanuvchi nomi">
03    <input type="password" id="password" placeholder="Parol">
04    <button type="submit">Kirish</button>
05</form>
06<p id="message"></p>

script.js
JavaScriptNusxalash
01let form = document.getElementById("loginForm");
02let message = document.getElementById("message");
03 
04form.addEventListener("submit", function (event) {
05    event.preventDefault(); // Chapter 33'da o'rgangan
06 
07    let username = document.getElementById("username").value;
08    let password = document.getElementById("password").value;
09 
10    if (username === "" || password === "") {
11        message.textContent = "Barcha maydonlarni to'ldiring!";
12        message.style.color = "red";
13        return;
14    }
15 
16    message.textContent = "Muvaffaqiyatli yuborildi!";
17    message.style.color = "green";
18});

35.3 ⚠️ Qiyin mavzu: Validatsiya turlari va tartibi

Simple Explanation

Yaxshi validatsiya odatda bir nechta bosqichda amalga oshiriladi, va har bir bosqich turli maqsadga xizmat qiladi.

Jadval — Validatsiya turlari

🔥 Important
Client-side (JavaScript) validatsiya — faqat foydalanuvchi tajribasini yaxshilash uchun. U hech qachon xavfsizlik vositasi sifatida yetarli emas, chunki foydalanuvchi brauzer konsoli orqali JavaScript'ni butunlay chetlab o'tishi mumkin. Server-side validatsiya har doim majburiy.

Amaliy misol — Real-time validatsiya

index.html
HTMLNusxalash
01<input type="email" id="email">
02<span id="emailError"></span>

script.js
JavaScriptNusxalash
01let emailInput = document.getElementById("email");
02let emailError = document.getElementById("emailError");
03 
04emailInput.addEventListener("input", function () {
05    let value = emailInput.value;
06 
07    if (value === "") {
08        emailError.textContent = "";
09    } else if (!value.includes("@")) {
10        emailError.textContent = "Email formati noto'g'ri";
11        emailError.style.color = "red";
12    } else {
13        emailError.textContent = "✓ To'g'ri";
14        emailError.style.color = "green";
15    }
16});

Explanation

input hodisasi — foydalanuvchi har bir belgi kiritganda ishga tushadi, shuning uchun fikr-mulohaza darhol, foydalanuvchi hali yozayotgan paytda beriladi.

35.4 Ko'p maydonli forma validatsiyasi

Simple Explanation

Bir nechta maydonni birgalikda tekshirish uchun, har bir maydon uchun alohida tekshiruv function yozib, ularni umumiy tekshiruvda birlashtirish tavsiya etiladi.

Amaliy misol — to'liq ro'yxatdan o'tish formasi

index.html
HTMLNusxalash
01<form id="signupForm">
02    <input type="text" id="fullName" placeholder="To'liq ism">
03    <input type="email" id="signupEmail" placeholder="Email">
04    <input type="password" id="signupPassword" placeholder="Parol">
05    <button type="submit">Ro'yxatdan o'tish</button>
06</form>
07<div id="errors"></div>

script.js
JavaScriptNusxalash
01function validateName(name) {
02    return name.trim().length >= 3;
03}
04 
05function validateEmail(email) {
06    return email.includes("@") && email.includes(".");
07}
08 
09function validatePassword(password) {
10    return password.length >= 8;
11}
12 
13document.getElementById("signupForm").addEventListener("submit", function (event) {
14    event.preventDefault();
15 
16    let name = document.getElementById("fullName").value;
17    let email = document.getElementById("signupEmail").value;
18    let password = document.getElementById("signupPassword").value;
19 
20    let errors = [];
21 
22    if (!validateName(name)) {
23        errors.push("Ism kamida 3 belgidan iborat bo'lishi kerak");
24    }
25    if (!validateEmail(email)) {
26        errors.push("Email formati noto'g'ri");
27    }
28    if (!validatePassword(password)) {
29        errors.push("Parol kamida 8 belgidan iborat bo'lishi kerak");
30    }
31 
32    let errorsDiv = document.getElementById("errors");
33 
34    if (errors.length > 0) {
35        errorsDiv.innerHTML = errors.map(err => `<p style="color: red">${err}</p>`).join("");
36    } else {
37        errorsDiv.innerHTML = `<p style="color: green">Muvaffaqiyatli ro'yxatdan o'tdingiz!</p>`;
38    }
39});

How It Works

1. Har bir maydon uchun alohida validateX() function yozilgan — bu kodni tartibli va qayta ishlatiladigan qiladi.
2. errors array'i (Chapter 7) — barcha topilgan xatoliklarni to'playdi.
3. errors.length > 0 — agar kamida bitta xatolik bo'lsa, foydalanuvchiga barcha xatoliklar birdaniga ko'rsatiladi.

🔗 Connection
Bu misol Chapter 14'da o'rgangan map() va Chapter 17'dagi template literal'larni birgalikda qo'llagan holda, xatoliklar ro'yxatini chiroyli formatda ko'rsatadi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
Oddiy forma yarating (name inputi bilan), submit hodisasida preventDefault() chaqirib, agar name bo'sh bo'lsa "Ismni kiriting" xabarini chiqaring.
Required Concepts:

• form submit
• preventDefault
  Hint:
  Chapter 35.2'dagi misolga o'xshab yozing.

🟡 Exercise 2 — Medium

Task:
Parol inputi yarating, input hodisasi orqali real-time tarzda parol uzunligini tekshiring: 8dan kam bo'lsa qizil, aks holda yashil rangda "Kuchli parol" deb ko'rsating.
Required Concepts:

• input event
• Real-time validation
  Hint:
  Chapter 35.3'dagi email misoliga o'xshab yozing.

🔴 Exercise 3 — Hard

Task:
To'liq "Ro'yxatdan o'tish" formasi yarating: name, email, password, confirmPassword maydonlari bilan. Barcha maydonlarni tekshiring, shu jumladan password === confirmPassword ekanligini ham. Barcha xatoliklarni ro'yxat sifatida ko'rsating.
Required Concepts:

• Ko'p maydonli validatsiya
• Array (errors to'plash)
  Hint:
  Chapter 35.4'dagi misolni kengaytiring, confirmPassword tekshiruvini qo'shing.

🔮 Predict the Output

index.html
HTMLNusxalash
01<form id="testForm">
02    <input type="text" id="field">
03    <button type="submit">Yubor</button>
04</form>

script.js
JavaScriptNusxalash
01document.getElementById("testForm").addEventListener("submit", function (event) {
02    console.log("Submit ishladi");
03});

Foydalanuvchi tugmani bossa, nima bo'ladi?

🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.

<details> <summary>Answer</summary> Konsolga "Submit ishladi" chiqadi, lekin shu bilan birga sahifa ham qayta yuklanadi (chunki event.preventDefault() chaqirilmagan).

Why?
submit hodisasi ishga tushadi va listener bajariladi, lekin forma yuborilishining standart xatti-harakati (sahifani qayta yuklash) preventDefault() bilan to'xtatilmagani uchun, u ham baravar davom etadi. Agar sahifa tez qayta yuklansa, konsoldagi natijani ko'rishga ham ulgurmasligi mumkin.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor:

script.js
JavaScriptNusxalash
01document.getElementById("myForm").addEventListener("submit", function (event) {
02    event.preventDefault();
03 
04    let email = document.getElementById("email").value;
05 
06    if (email.includes("@")) {
07        console.log("Email to'g'ri");
08    }
09 
10    if (email.length < 5) {
11        console.log("Email juda qisqa");
12    }
13    // Ikkala shart ham TRUE bo'lishi mumkin, lekin dasturchi
14    // faqat bittasi ishlashini kutgan
15});

Your Task:

• Nima uchun ikkala console.log ham chiqishi mumkinligini tushuntiring.
• Agar faqat birinchi mos kelgan shart ishlashi kerak bo'lsa, kodni qanday tuzatish kerak?

<details> <summary>Solution</summary> Tushuntirish: Ikkala if — mustaqil, bir-biriga bog'liq bo'lmagan shartlar (Chapter 4). Agar email ham qisqa, ham @ belgisiga ega bo'lsa (masalan, "a@b"), ikkalasi ham true bo'lib, ikkala xabar ham chiqadi.

Yechim — agar faqat birinchi mos shart kerak bo'lsa, else if ishlatish kerak:

script.js
JavaScriptNusxalash
01if (email.length < 5) {
02    console.log("Email juda qisqa");
03} else if (email.includes("@")) {
04    console.log("Email to'g'ri");
05}

Yoki, agar chindan ham har ikkala tekshiruv mustaqil bo'lishi kerak bo'lsa (masalan, ikkalasi ham alohida validatsiya xabari bo'lsa), asl kod to'g'ri — bu holda "muammo" yo'q, faqat mantiqni aniq loyihalash kerak.

</details>

📌 Chapter Summary

• Forma elementlariga getElementById yoki form.elements[name] orqali kirish mumkin.
• preventDefault() — forma yuborilganda sahifa qayta yuklanishining oldini oladi.
• Validatsiya bir nechta bosqichda bo'ladi: HTML5, real-time, submit, server-side.
• Client-side validatsiya — faqat qulaylik uchun, xavfsizlik uchun server-side majburiy.
• Har bir maydon uchun alohida validatsiya function yozish — kodni tartibli qiladi.

🎯 Key Takeaways

• event.preventDefault() — formalar bilan ishlashda deyarli har doim kerak.
• Real-time validatsiya (input hodisasi) — foydalanuvchi tajribasini sezilarli yaxshilaydi.
• Client-side validatsiya hech qachon xavfsizlik uchun yetarli emas — server-side har doim kerak.
• Xatoliklarni array'da to'plab, birdaniga ko'rsatish — ko'p maydonli formalar uchun qulay naqsh.
• Har bir validatsiya qoidasini alohida function qilib yozish — kodni qayta ishlatish va testlashni osonlashtiradi.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01form.addEventListener("submit", function (event) {
02    event.preventDefault();
03 
04    let value = document.getElementById("field").value;
05 
06    if (value.trim() === "") {
07        // xatolik ko'rsatish
08        return;
09    }
10 
11    // davom etish
12});
13 
14input.addEventListener("input", function (event) {
15    // real-time validatsiya
16});

---