# JavaScript formalar bilan ishlash

> JavaScript'da forma: input qiymatini olish, submit hodisasini ushlash, validatsiya va xato xabari. Foydalanuvchi ma'lumotini tekshirishni o'rganing.

Manba: https://learncode.uz/javascript/formalar/
Sana: 2026-05-29

[Forma](https://learncode.uz/html-css/forma-asoslari) — foydalanuvchidan ma'lumot oladigan asosiy
vosita. JavaScript uni yuborishdan oldin tekshiradi va xatoni darhol
ko'rsatadi.

## Maydon qiymatini olish

```js
const name = document.querySelector("#name").value;
const age = document.querySelector("#age").value;

console.log(name, typeof name);
console.log(age, typeof age);
console.log(Number(age) + 5);
```

```html
<input id="name" value="Aziz">
<input id="age" type="number" value="20">
```

> **value doim matn qaytaradi**
>
> `type="number"` bo'lsa ham, `value` **matn** (`string`) beradi. Son sifatida
> ishlatish uchun `Number()` bilan o'girish kerak — aks holda `"20" + 5` natijasi
> `"205"` bo'ladi.

## submit hodisasi

```js
const form = document.querySelector("#form");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const name = document.querySelector("#name").value;
  console.log("Yuborildi:", name);
});

console.log("Ism yozib, Yuborish tugmasini bosing");
```

```html
<form id="form">
  <input id="name" placeholder="Ismingiz">
  <button type="submit">Yuborish</button>
</form>
```

`e.preventDefault()` **shart**: usiz brauzer sahifani qayta yuklaydi va
JavaScript'ingiz bajarilmay qoladi.

## Oddiy validatsiya

```js
const form = document.querySelector("#form");
const error = document.querySelector("#error");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const name = document.querySelector("#name").value.trim();

  if (name === "") {
    error.textContent = "Ism kiritilmadi";
    return;
  }
  if (name.length < 3) {
    error.textContent = "Ism kamida 3 letter bo'lishi kerak";
    return;
  }

  error.textContent = "";
  console.log("Qabul qilindi:", name);
});

console.log("Bo'sh, 2 harfli va to'liq ism bilan sinab ko'ring");
```

```html
<form id="form">
  <input id="name" placeholder="Ismingiz">
  <button type="submit">Yuborish</button>
</form>
<p id="error" style="color:crimson"></p>
```

`trim()` matn boshi va oxiridagi bo'shliqlarni olib tashlaydi — foydalanuvchi
faqat probel kiritsa ham xato ushlanadi.

`return` bilan funksiyadan erta chiqish naqshi qulay: har tekshiruv o'z
xabarini beradi va keyingisiga o'tmaydi.

## Checkbox va select

```js
document.querySelector("#validate").addEventListener("click", () => {
  const agreed = document.querySelector("#shart").checked;
  const city = document.querySelector("#city").value;

  console.log("Rozi:", agreed);
  console.log("Shahar:", city);
});

console.log("Belgilab, tugmani bosing");
```

```html
<label><input type="checkbox" id="shart"> Shartlarga roziman</label>
<br><br>
<select id="city">
  <option value="tst">Toshkent</option>
  <option value="smq">Samarqand</option>
</select>
<br><br>
<button id="validate">Tekshirish</button>
```

Checkbox uchun `value` emas, **`checked`** ishlatiladi — u `true`/`false`
qaytaradi.

## Radio tugmalar

```js
document.querySelector("#validate").addEventListener("click", () => {
  const selected = document.querySelector('input[name="level"]:checked');
  console.log(selected.value);
});

console.log("Tanlab, tugmani bosing");
```

```html
<label><input type="radio" name="level" value="boshlangich" checked> Boshlang'ich</label>
<label><input type="radio" name="level" value="orta"> O'rta</label>
<br><br>
<button id="validate">Tanlangan</button>
```

`:checked` selektori guruhdan belgilangan tugmani topadi.

## Jonli tekshiruv

Foydalanuvchi yozayotganda darhol javob berish:

```js
const password = document.querySelector("#password");
const state = document.querySelector("#state");

password.addEventListener("input", () => {
  const n = password.value.length;

  if (n === 0) {
    state.textContent = "";
  } else if (n < 6) {
    state.textContent = "Juda qisqa (" + n + "/6)";
    state.style.color = "crimson";
  } else {
    state.textContent = "Yetarli";
    state.style.color = "green";
  }
});

console.log("Parol yozib ko'ring");
```

```html
<input id="password" type="password" placeholder="Parol">
<p id="state"></p>
```

> **Brauzerdagi tekshiruv yetarli emas**
>
> JavaScript validatsiyasi foydalanuvchiga **qulaylik** uchun — u xatoni tez
> ko'radi. Lekin uni chetlab o'tish oson: brauzer konsoli orqali yoki to'g'ridan-
> to'g'ri so'rov yuborib. Shuning uchun ma'lumot **serverda ham** tekshirilishi
> shart.

## Amaliy mashq

Ro'yxatdan o'tish formasini yozing:

1. Ism, email va parol maydonlari bo'lgan forma yasang;
2. `submit` da `preventDefault` chaqiring;
3. bo'sh maydonlarni tekshirib, xato xabarini ko'rsating;
4. email ichida `@` borligini tekshiring;
5. parol uzunligini jonli (`input` hodisasida) tekshiring;
6. hammasi to'g'ri bo'lsa, ma'lumotni `console.log` bilan chiqaring.

2-qadamdagi `preventDefault` ni olib tashlab ko'ring — nima o'zgaradi?

## Qisqacha xulosa

- `input.value` maydon qiymatini beradi va u **doim matn**.
- `submit` hodisasida `e.preventDefault()` shart.
- Checkbox uchun `checked`, radio uchun `:checked` selektori.
- `trim()` ortiqcha bo'shliqni olib tashlaydi; erta `return` tekshiruvni soddalashtiradi.
- Brauzerdagi validatsiya server tekshiruvini **almashtirmaydi**.

Keyingi darsda [matn metodlari](https://learncode.uz/javascript/matn-metodlari) — string bilan
ishlashni ko'ramiz.