DOM — forma bilan ishlash — input, submit, validation

~20 daq · JavaScript · Brauzer API lari

Muammodan boshlaylik

Ro'yxatdan o'tish formasi. Foydalanuvchi ism, email, parol kiritib "Yuborish" ni bosadi.

Agar HTML ning standart <form> xulqiga tashlasangiz — sahifa yangilanadi, ma'lumot URL ga qo'shiladi (GET holida) yoki serverga ketadi va sahifa qayta yuklanadi.

Zamonaviy ilovada bu shart emas. Sahifa yangilanmasin, ma'lumot tekshirilsin, keyin server ga JSON yuborilsin. Buning uchun forma bilan JavaScript orqali ishlash kerak.

Forma va inputlarni olish

HTML:

<form id="royxatdan-otish">
  <input type="text"     id="ism"    name="ism"    placeholder="Ismingiz">
  <input type="email"    id="email"  name="email"  placeholder="Email">
  <input type="password" id="parol"  name="parol"  placeholder="Parol">
  <button type="submit">Ro'yxatdan o'tish</button>
</form>

Input qiymatini olish — .value xususiyati:

const ism   = document.getElementById("ism");
console.log(ism.value); // foydalanuvchi kiritgan matn

submit hodisasi — yuborishni to'xtatish

Forma yuborilganda submit hodisasi chiqadi. preventDefault() sahifaning yangilanishini to'xtatadi.

Hayotiy o'xshatma

Pasport olish uchun hujjatlar topshirdingiz. Xodim qabul qilishdan oldin — hujjatlarni tekshiradi. Yetishmayotgan narsa bo'lsa — qaytaradi. Hammasi joyida bo'lsa — qabul qiladi. submit hodisasi — o'sha qabul qilish daqiqasi. preventDefault — xodimning "to'xta, avval tekshiramiz" deyishi.

const forma = document.getElementById("royxatdan-otish");

forma.addEventListener("submit", function(event) {
  event.preventDefault(); // ← sahifa yangilanmaydi

  const ism   = document.getElementById("ism").value;
  const email = document.getElementById("email").value;
  const parol = document.getElementById("parol").value;

  console.log({ ism, email, parol });
  // ← keyingi qadamlar: tekshirish, serverga yuborish
});

FormData — forma ma'lumotlarini oson yig'ish

Ko'p maydon bo'lsa — har birini alohida .value bilan olish zerikarli. FormData — forma ma'lumotlarini bir marta yig'ib beradi.

forma.addEventListener("submit", function(event) {
  event.preventDefault();

  const malumot = new FormData(forma); // ← barcha maydonlar

  console.log(malumot.get("ism"));   // "Jasur"
  console.log(malumot.get("email")); // "jasur@mail.com"

  // Ob'ektga aylantirish:
  const obekt = Object.fromEntries(malumot);
  console.log(obekt); // { ism: "Jasur", email: "...", parol: "..." }
});

FormData name atributi bo'yicha qiymatlarni yig'adi. Shuning uchun har bir inputda name bo'lishi shart.

Validatsiya — ma'lumotni tekshirish

Ma'lumot serverga yuborilishidan oldin tekshirilishi kerak. Bu — validatsiya (validation).

Hayotiy o'xshatma

Avia chipta sotib olmoqdasiz. Kassa xodimi pasportingizni tekshiradi: muddati o'tganmi, ism to'g'rimi, davlat mos keladi. Noto'g'ri narsa bo'lsa — "to'g'rilang" deydi. To'g'ri bo'lsa — chipa beradi. Validatsiya — o'sha tekshirish.

forma.addEventListener("submit", function(event) {
  event.preventDefault();

  const ism   = document.getElementById("ism").value.trim();
  const email = document.getElementById("email").value.trim();
  const parol = document.getElementById("parol").value;

  // Tekshirish
  if (!ism) {
    xatoBoshqar("ism", "Ism kiritilmagan");
    return; // ← to'xtatish — serverga yubormaslik
  }

  if (!email.includes("@")) {
    xatoBoshqar("email", "Email noto'g'ri formatda");
    return;
  }

  if (parol.length < 8) {
    xatoBoshqar("parol", "Parol kamida 8 ta belgi bo'lsin");
    return;
  }

  // Hammasi yaxshi — serverga yuborish
  serverGaYuborish({ ism, email, parol });
});

function xatoBoshqar(maydon, xabar) {
  const xatoEl = document.getElementById(`${maydon}-xato`);
  if (xatoEl) xatoEl.textContent = xabar;
}

input hodisasi — har harf kiritilganda

change — foydalanuvchi inputdan chiqib ketganda bir marta ishlaydi. input — har harf kiritilganda ishlaydi. Real vaqtda tekshirish uchun.

const parol_input = document.getElementById("parol");
const kuch_el     = document.getElementById("parol-kuch");

parol_input.addEventListener("input", function() {
  const qiymat = this.value;

  if (qiymat.length < 6) {
    kuch_el.textContent = "Zaif";
    kuch_el.className   = "zaif";
  } else if (qiymat.length < 10) {
    kuch_el.textContent = "O'rtacha";
    kuch_el.className   = "o_rtacha";
  } else {
    kuch_el.textContent = "Kuchli";
    kuch_el.className   = "kuchli";
  }
});

Turli input turlari bilan ishlash

Checkbox:

const roziman = document.getElementById("roziman");

console.log(roziman.checked); // true yoki false — belgilangan/belgilanmagan
console.log(roziman.value);   // "on" (standart) — checked muhim, value emas

Radio:

// Tanlangan radio ni topish
const tanlangan = document.querySelector('input[name="jins"]:checked');
if (tanlangan) {
  console.log(tanlangan.value); // "erkak" yoki "ayol"
}

Select (dropdown):

const shahar = document.getElementById("shahar");

console.log(shahar.value); // tanlangan option qiymati

Tez-tez uchraydigan xatolar

value o'rniga textContent o'qish:

const input = document.querySelector("input");

// ❌ — input ning matnini o'qimaydi
console.log(input.textContent); // ""

// ✅ — input qiymatini .value bilan
console.log(input.value); // "foydalanuvchi yozgani"

.trim() unutish — bo'sh joylar bilan validatsiya:

// ❌ — foydalanuvchi faqat bo'sh joy yozsa ham o'tib ketadi
if (!ism) { ... } // "   " — bo'sh emas, o'tib ketadi

// ✅ — avval trim
const ism = document.getElementById("ism").value.trim();
if (!ism) { ... } // "   ".trim() = "" — bo'sh, to'xtatiladi

submit o'rniga click handler qo'yish:

// ❌ — Enter bilan yuborilsa ishlamaydi
tugma.addEventListener("click", function() {
  // forma yuborildi
});

// ✅ — Enter ham, tugma bosish ham
forma.addEventListener("submit", function(event) {
  event.preventDefault();
  // ...
});

Xulosa

submit hodisasi + preventDefault() — zamonaviy forma bilan ishlashning asosi. Sahifa yangilanmaydi, JavaScript ishlab ketadi.

.value — input qiymatini o'qish. Har doim .trim() bilan tozalash.

FormData — barcha maydonlarni bir marta yig'ib olish. Object.fromEntries() bilan ob'ektga aylantirish.

Validatsiya — serverga yuborishdan oldin tekshirish. Xato bo'lsa return — to'xtatish.

input hodisasi — real vaqtda tekshirish. change — fokusdan chiqqanda.

Keyingi dars

48-dars: BOM — window, location, history, navigator