HTML forma validatsiyasi: required, pattern, min/max va brauzer tekshiruvi

Qisqacha: Brauzer formani yuborishdan oldin atributlarga qarab tekshiradi: required — bo'sh qolmasin, minlength/maxlength — uzunlik, min/max — son va sana chegarasi, pattern — shablon, type="email" — email ko'rinishi. Xato bo'lsa, forma yuborilmaydi va brauzer birinchi xato maydon yonida xabar chiqaradi. Bu faqat mijozga qulaylik: hujumchi tekshiruvni bir zumda chetlab o'tadi, shuning uchun server hammasini baribir qayta tekshiradi.

Bu darsda

• required, minlength, maxlength, min, max va pattern bilan maydonga qoida qo'ya olasiz.
• type="email", url va tel nimani tekshirishini — va nimani tekshirmasligini — bilasiz.
• Brauzer xabarlari qaysi tilda chiqishini va nega ularni HTML bilan o'zgartirib bo'lmasligini tushunasiz.
• novalidate va formnovalidate bilan tekshiruvni o'chira olasiz.
• Nega server tekshiruvi har doim majburiy ekanini o'z qo'lingiz bilan isbotlaysiz.

Oldin bilishingiz kerak: Maydon holatlari va yashirin maydonlar, Matnli maydonlar, Son, sana, vaqt va rang maydonlari, Mobil klaviatura va kiritish yordamchilari (pattern).

1. Nega bu kerak?

Ali «Bahor» choyxonasida stol bron qilmoqchi. U shoshib formani to'ldirdi: ismni yozmadi, telefonga "salom" deb yozdi, kishi sonini 0 qoldirdi. "Bron qilish" tugmasini bosdi.

Forma serverga ketdi. Server "ma'lumot noto'g'ri" deb javob qaytardi, sahifa qayta yuklandi. Ali yozgan hamma narsa o'chib ketdi. U saytni yopib, boshqa choyxonaga qo'ng'iroq qildi.

Yaxshiroq yo'l bor: xatoni yuborishdan oldin, shu yerning o'zida ko'rsatish. Brauzer buni bepul qiladi — maydonga bitta atribut qo'shish kifoya. Bu brauzer validatsiyasi (client-side validation) deyiladi. Validatsiya — ma'lumot qoidaga mosligini tekshirish.

Choyxona eshigidagi "Faqat bron bilan" yozuvini tasavvur qiling. U halol mijozga oldindan yo'l ko'rsatadi — vaqtini tejaydi. Lekin ichkarida ofitsiant baribir ro'yxatni tekshiradi, chunki yozuvni e'tiborsiz qoldirib kirish mumkin. Brauzer tekshiruvi — eshikdagi yozuv. Server tekshiruvi — ofitsiant.

2. required: bo'sh qolmasin

2.1 Birinchi tekshiruv

required — majburiy maydon. U bo'sh bo'lsa, forma yuborilmaydi.

<form method="get">
  <label for="ism">Ismingiz</label>
  <input type="text" id="ism" name="ism" required>
  <button type="submit">Bron qilish</button>
</form>

Maydonni bo'sh qoldirib, tugmani bosing. Uch narsa bo'ladi:

1. Forma yuborilmaydi — URL o'zgarmaydi.
2. Brauzer fokusni ism maydoniga olib boradi.
3. Maydon yonida kichik xabar chiqadi. Chrome'ning inglizcha versiyasida u shunday:

Please fill out this field.

Tarjimasi: "Iltimos, bu maydonni to'ldiring."

Xato maydonlar bir nechta bo'lsa, brauzer faqat birinchisini ko'rsatadi. Uni tuzatib, yana bosgandan keyin navbatdagisiga o'tadi.

2.2 required qaysi maydonlarda ishlaydi

• Matn maydonlari va textarea — kamida bitta belgi bo'lsin.
• select — birinchi option ning value si bo'sh (value="") bo'lsa, u "tanlanmagan" hisoblanadi. Tanlash maydonlari darsidagi "Tanlang..." varianti shu uchun kerak edi.
• Checkbox — belgilanishi shart. Masalan, "Bron shartlariga roziman".
• Radio guruhi — guruhdan bittasi tanlanishi shart. required ni guruhning bitta tugmasiga qo'yish yetarli, lekin hammasiga qo'ysangiz, kodni o'qish osonroq.
• Sana, vaqt, son, fayl — qiymat bo'lsin.

Diqqat: Faqat bo'sh joylardan iborat matn required dan o'tadi. Mijoz ism o'rniga uchta probel yozsa, brauzer uni "to'ldirilgan" deb hisoblaydi. Probellarni server olib tashlaydi va shundan keyin tekshiradi.

Tekshirib ko'ring: Forma yuborilganda readonly va required qo'yilgan bo'sh maydon brauzerni to'xtatadimi?

3. Uzunlik: minlength va maxlength

<label for="ism">Ismingiz</label>
<input type="text" id="ism" name="ism"
       required minlength="2" maxlength="50">

• maxlength="50" — brauzer 50 belgidan ortiq yozishga yo'l qo'ymaydi. 51-harf shunchaki yozilmaydi. Uzun matn joylashtirilsa (paste), ortig'i kesib tashlanadi.
• minlength="2" — kamida 2 belgi. Ali bitta harf yozib yuborsa, xabar chiqadi:

Please lengthen this text to 2 characters or more (you are currently using 1 character).

Tarjimasi: "Matnni 2 yoki undan ko'p belgigacha uzaytiring (hozir 1 belgi)".

Bitta nozik joy: minlength faqat mijoz maydonga o'zi yozganda tekshiriladi. HTML'da value="A" deb yozib qo'ysangiz, brauzer uni xato demaydi. Bu ataylab qilingan: mijoz tegmagan maydon uchun uni ayblamaydi.

Bo'sh maydonni minlength tekshirmaydi — bo'sh bo'lmasligi uchun required ham kerak.

4. Son va sana chegaralari: min, max, step

Son, sana, vaqt va rang maydonlari darsida min, max va step ni ko'rgan edik. Endi ular tekshiruvda qanday ishlashini ko'ramiz:

<label for="odam">Necha kishi</label>
<input type="number" id="odam" name="odam"
       required min="1" max="20">

<label for="vaqt">Soat nechada</label>
<input type="time" id="vaqt" name="vaqt"
       required min="10:00" max="22:00">

Choyxona 10:00 dan 22:00 gacha bron qabul qiladi, eng katta stolga 20 kishi sig'adi. Chegaradan chiqsa, Chrome shunday deydi:

Value must be greater than or equal to 1.
Value must be less than or equal to 20.
Value must be 22:00 or earlier.

Tarjimasi: "Qiymat 1 dan katta yoki teng bo'lishi kerak", "Qiymat 20 dan kichik yoki teng bo'lishi kerak", "Qiymat 22:00 yoki undan oldin bo'lishi kerak".

step ham tekshiriladi. number maydonida step ning odatiy qiymati — 1, ya'ni faqat butun son. Ali 2.5 kishi yozsa:

Please enter a valid value. The two nearest valid values are 2 and 3.

Tarjimasi: "To'g'ri qiymat kiriting. Eng yaqin to'g'ri qiymatlar — 2 va 3".

Diqqat: min va max faqat son, sana, vaqt va range maydonlarida ishlaydi. type="text" maydonga min="1" yozsangiz, brauzer uni e'tiborsiz qoldiradi.

5. type bo'yicha tekshiruv

Ba'zi maydon turlari qiymat ko'rinishini o'zi tekshiradi. Lekin ular siz o'ylagandan ancha "yumshoq".

5.1 type="email"

Brauzer faqat bitta narsani tekshiradi: @ bormi va uning ikki tomonida nimadir bormi.

ali uchun xabar:

Please include an '@' in the email address. 'ali' is missing an '@'.

Tarjimasi: "Email manzilga '@' qo'shing. 'ali' da '@' yo'q."

Brauzer email haqiqatan borligini tekshirmaydi. hech.kim@example.com ham o'tadi. Emailni faqat server tekshira oladi — masalan, unga tasdiqlash xati yuborib.

5.2 type="url"

URL albatta sxema bilan boshlanishi kerak: https://. Mijoz Telegram kanalini t.me/sizning_kanal deb yozsa, xato:

Please enter a URL.

Tarjimasi: "URL kiriting." Mijoz uchun bu tushunarsiz — u URL'ni yozdi-ku! Shuning uchun type="url" maydon yoniga namuna yozib qo'yiladi: https://t.me/sizning_kanal.

5.3 type="tel" — hech narsani tekshirmaydi

Bu ko'pchilikni hayron qoldiradi. type="tel" telefonda raqamli klaviaturani ochadi (Mobil klaviatura darsi), lekin qiymatni umuman tekshirmaydi. salom ham o'tadi. Sababi — dunyodagi telefon raqamlari juda xilma-xil. Brauzer bitta formatni majburlay olmaydi.

Telefon ko'rinishini tekshirish uchun pattern kerak — uni Mobil klaviatura darsida yozgan edik.

5.4 type="number"

Ko'p brauzerlar number maydoniga harf yozishga yo'l qo'ymaydi. Lekin e, +, - va nuqta yoziladi, chunki 2e3 ham son (2000). Mijoz 2.5e kabi chala son yozsa:

Please enter a number.

Tarjimasi: "Son kiriting."

Tekshirib ko'ring: <input type="email" name="email"> maydoni bo'sh qoldirildi. Forma yuboriladimi?

6. pattern: o'z shabloningiz

6.1 Telefon raqami uchun shablon — eslatma

Mobil klaviatura darsida o'zbek raqami uchun pattern yozgan edik. Bugun unga required ham qo'shamiz — sababini 6.2-dagi qoidalardan bilasiz:

<label for="telefon">Telefon (+998 90 000 00 00)</label>
<input type="tel" id="telefon" name="telefon" required
       pattern="\+998 ?\d{2} ?\d{3} ?\d{2} ?\d{2}"
       title="+998 va 9 ta raqam: +998 90 000 00 00">

Eslatma uchun: \d — bitta raqam (0–9), {2} — oldingi narsa aynan 2 marta, \+ — + belgisining o'zi, ? — ixtiyoriy bo'sh joy.

Xato bo'lsa, Chrome shunday deydi:

Please match the requested format.

Tarjimasi: "So'ralgan formatga moslang." Qaysi format? Xabarning o'zi aytmaydi. Shuning uchun title atributi bor: ko'p brauzerlar uning matnini xabar ostida ko'rsatadi — "+998 va 9 ta raqam". Undan ham yaxshisi — formatni label ning o'zida yozish. Yuqoridagi misolda shunday qildik.

6.2 pattern ning qoidalari

1. Butun qiymat mos kelishi shart. pattern="\d{2}" bo'lsa, 123 xato — ichida ikki raqam bor bo'lsa ham. Brauzer shablonni o'zi ^...$ bilan o'raydi, siz yozishingiz shart emas.
2. Bo'sh maydon tekshirilmaydi. required ni unutmang.
3. Faqat matnli maydonlarda ishlaydi: text, tel, email, url, password, search. number va date da pattern e'tiborsiz qoldiriladi.
4. Regex noto'g'ri bo'lsa, pattern jimgina o'chadi. Bu haqda xatolar bo'limida.

Regex'ni to'liq RegExp asoslari darsida o'rganamiz. HTML uchun bir nechta oddiy shablon yetarli.

7. Xabarlar qaysi tilda chiqadi

Buni ko'p o'zbek dasturchilar kech bilib oladi. Brauzer xabarlari sahifa tilida emas, brauzerning o'z tilida chiqadi. <html lang="uz"> yozsangiz ham, rus tilidagi Chrome ruscha gapiradi:

Заполните это поле.
Значение должно быть больше или равно 1.
Введите данные в указанном формате.

Bular — required, min va pattern xabarlarining Chrome'dagi ruscha shakli. Mazmuni inglizcha xabarlar bilan bir xil.

Nega o'zbekcha emas? Kompyuterdagi Chrome interfeys tillari ro'yxatida o'zbek tili yo'q. Shuning uchun o'zbek foydalanuvchilarning ko'pchiligi bu xabarlarni ruscha yoki inglizcha ko'radi. Sizning saytingiz esa o'zbekcha — natija aralash.

Yana ikki cheklov bor:

• Har brauzer o'z matnini ishlatadi: Chrome, Firefox va Safari xabarlari bir-biridan farq qiladi.
• Xabar pufagining ko'rinishini CSS bilan o'zgartirib bo'lmaydi.

Matnni o'zgartirishning yagona yo'li — JavaScript. setCustomValidity degan buyruq xabarni o'zbekcha qilib beradi. Uni Constraint Validation API darsida o'rganamiz. Hozircha qoida: HTML atributlari qoidani beradi, xabar matni esa brauzerniki.

8. Tekshiruvni o'chirish: novalidate va formnovalidate

Ba'zan brauzer tekshiruvi xalaqit beradi. Buning uchun ikki atribut bor.

novalidate — formaga qo'yiladi. Brauzer tugma bosilganda tekshirmaydi, forma darhol yuboriladi:

<form method="get" novalidate>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Yuborish</button>
</form>

Qachon kerak? Ko'p real saytlar xabarlarni o'zi — o'zbekcha va chiroyli qilib — JavaScript bilan chiqaradi. Shunda brauzerning pufagi xalaqit beradi va novalidate qo'yiladi. required va type="email" esa o'chirilmaydi: JavaScript ularni o'qib, o'z tekshiruvida ishlatadi.

formnovalidate — tugmaga qo'yiladi. Tugmalar va yuborish darsida ko'rgan edik: faqat shu tugma bosilganda tekshiruv o'chadi.

<button type="submit">Bron qilish</button>
<button type="submit" name="amal" value="qoralama"
        formnovalidate>Qoralama sifatida saqlash</button>

Qoralama chala bo'lishi tabiiy — uni tekshirishdan ma'no yo'q.

9. CSS eslatma: :invalid va :user-invalid

CSS'ni keyingi qismda o'rganamiz. Lekin bir narsani hozir bilib qo'ying: CSS xato maydonni alohida bo'yashi mumkin.

input:user-invalid {
  border-color: red;
}

Ikki xil "xato maydon" tanlovchisi bor:

• :invalid — maydon qoidaga mos bo'lmasa, darhol ishlaydi. Sahifa ochilishi bilan bo'sh required maydonlar qizarib ketadi — mijoz hali hech narsa yozmagan bo'lsa ham.
• :user-invalid — faqat mijoz maydonga tegib, undan chiqqanda yoki formani yuborishga uringanda ishlaydi. 2023-yildan beri barcha asosiy brauzerlarda bor.

Shuning uchun deyarli har doim :user-invalid to'g'ri tanlov. Batafsil — Holat pseudo-klasslari darsida.

10. Hujumchi nigohi

Brauzer tekshiruvini chetlab o'tish uchun hujumchiga 10 soniya yetadi. O'zingiz sinab ko'ring:

1. Bron formasini oching va F12 bosing.
2. Elements panelida form tegini toping va unga novalidate qo'shing. Yoki ism maydonidagi required ni o'chiring.
3. Ismni bo'sh qoldirib, kishi soniga 500 yozing va yuboring. URL taxminan shunday bo'ladi:

bron/?ism=&odam=500

Forma ketdi. Bundan tashqari:

• maxlength="50" ni o'chirib, ism o'rniga 10 megabaytlik matn yuborish mumkin.
• Brauzer umuman kerak emas: Tarmoqni terminaldan tekshirish darsidagi curl bilan istalgan so'rovni yuborish mumkin.
• Botlar formani ochmaydi ham — ular to'g'ridan-to'g'ri serverga yozadi.

Demak, server brauzer tekshirgan narsani hammasini qayta tekshiradi:

• Majburiy maydonlar bormi, probellar olib tashlangandan keyin ham bo'sh emasmi.
• Uzunlik: 50 belgidan oshmaydimi. Juda katta so'rovlarni server umuman qabul qilmaydi.
• Format: telefon — +998 va 9 raqam, email — to'g'ri ko'rinishda.
• Chegaralar: 1–20 kishi, 10:00–22:00.
• Biznes qoidalari: sana o'tib ketmaganmi, stol bo'shmi. Bularni brauzer umuman bilmaydi.

Bir jumlada: brauzer tekshiruvi — mijozning vaqti uchun, server tekshiruvi — xavfsizlik uchun. Birinchisi yoqimli qo'shimcha, ikkinchisi majburiy. Serverdagi tekshiruvni Validatsiya: nima uchun, qayerda va qanday darsida yozamiz.

11. Ko'p uchraydigan xatolar

11.1 pattern ishlamayapti — hamma narsa o'tib ketyapti

Mobil klaviatura darsidagi tuzoqni eslang: brauzerlar pattern ni qat'iy v rejimida o'qiydi. Masalan, login uchun pattern="[a-z-]+" yozsangiz, 123 ham o'tib ketadi. Konsolda (F12 → Console) esa shunday xabar turadi:

Pattern attribute value [a-z-]+ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /[a-z-]+/v: Invalid character class

Tarjimasi: "pattern qiymati to'g'ri regex emas: ... noto'g'ri belgilar sinfi". Kvadrat qavs ichidagi tire oldida \ yo'q — brauzer pattern ni umuman o'chirib qo'ydi. Tuzatish: pattern="[a-z\-]+". Yangi pattern yozgach, albatta noto'g'ri qiymat bilan sinab ko'ring va konsolga qarang.

11.2 Bo'sh maydon tekshirilmayapti

pattern, minlength, type="email" — hech biri bo'sh maydonni to'xtatmaydi. Tuzatish: majburiy maydonga required qo'shing.

11.3 type="tel" dan tekshiruv kutish

tel klaviaturani o'zgartiradi, lekin tekshirmaydi. Tuzatish: pattern qo'shing.

11.4 Faqat brauzerga ishonish

"Formada required bor, serverda tekshirish shart emas" — eng xavfli xato. Tuzatish: Hujumchi nigohi bo'limidagi ro'yxat bo'yicha serverda hammasini qayta tekshiring.

11.5 Xabar mijozga tushunarsiz

"Please match the requested format." — o'zbek mijoz uchun bu hech narsa demaydi. Tuzatish: formatni label da oldindan yozing. Masalan: "Telefon (+998 90 000 00 00)".

12. Mashqlar

1-mashq (oson): O'tadimi?

Maydon: <input type="email" name="email" required>. Har bir qiymat uchun "o'tadi" yoki "o'tmaydi" deb yozing:

1. bo'sh →
2. malika →
3. malika@example →
4. malika@example.com →

2-mashq (o'rta): «Bahor» formasiga qoidalar

Bron formangizga quyidagi qoidalarni qo'ying:

1. Ism — majburiy, 2 dan 50 belgigacha.
2. Telefon — majburiy, Mobil klaviatura darsidagi +998 shabloni bilan. Format label da yozilgan.
3. Kishi soni — majburiy, 1 dan 20 gacha.
4. Vaqt — majburiy, 10:00 dan 22:00 gacha.
5. "Bron shartlariga roziman" checkbox'i — belgilanishi shart.

Har bir qoidani noto'g'ri qiymat bilan sinab ko'ring.

<form method="get">
  <label for="ism">Ismingiz</label>
  <input type="text" id="ism" name="ism"
         required minlength="2" maxlength="50">

  <label for="telefon">Telefon (+998 90 000 00 00)</label>
  <input type="tel" id="telefon" name="telefon" required
         pattern="\+998 ?\d{2} ?\d{3} ?\d{2} ?\d{2}"
         title="+998 va 9 ta raqam: +998 90 000 00 00">

  <label for="odam">Necha kishi (1–20)</label>
  <input type="number" id="odam" name="odam"
         required min="1" max="20">

  <label for="vaqt">Soat nechada (10:00–22:00)</label>
  <input type="time" id="vaqt" name="vaqt"
         required min="10:00" max="22:00">

  <label>
    <input type="checkbox" name="rozi" required>
    Bron shartlariga roziman
  </label>

  <button type="submit">Bron qilish</button>
</form>

3-mashq (qiyin): Tekshiruvni aylanib o'ting

2-mashqdagi formada:

1. DevTools orqali uchta turli usulda tekshiruvni chetlab o'tib, noto'g'ri ma'lumot yuboring.
2. Har usul uchun URL'ni yozib oling.
3. Server dasturchisiga xat yozing: server qaysi 5 ta narsani albatta tekshirishi kerak?

bron/?ism=&telefon=salom&odam=50&vaqt=03%3A00

13. Real ishda

• Deyarli har bir forma brauzer validatsiyasidan boshlanadi. Hatto murakkab saytlar ham required va type ni yozadi — JavaScript ishlamay qolsa ham, asosiy himoya qatlami qoladi.
• Katta loyihalarda novalidate va JavaScript bilan o'z xabarlari ishlatiladi. React'da (kursda alohida o'rganamiz) React Hook Form kabi kutubxonalar shu ishni qiladi. Bu nomlarni hozir bilish shart emas.
• Bitta qoidalar to'plami ikki joyda. Zamonaviy loyihalarda qoidalar bir marta yoziladi va ham brauzerda, ham serverda ishlatiladi. Buning uchun Zod degan kutubxona mashhur — uni backend qismida o'rganamiz.
• O'zbek saytlaridagi aralash til. Saytda ruscha "Заполните это поле" chiqishining sababi — brauzer tili. Tajribali dasturchi buni novalidate va o'zbekcha xabarlar bilan hal qiladi.
• Intervyu savoli: "Brauzer validatsiyasi bor, serverda tekshirish shartmi?" To'g'ri javob: "Ha, har doim. Brauzer tekshiruvi — qulaylik, uni DevTools yoki curl bilan chetlab o'tish mumkin."

Xulosa

• required — bo'sh qolmasin; checkbox — belgilansin; radio guruhi — bittasi tanlansin. Faqat probellar required dan o'tadi.
• minlength/maxlength — uzunlik; min/max/step — son va vaqt chegarasi; bo'sh maydonni ular tekshirmaydi.
• email faqat @ ni tekshiradi, url sxemani talab qiladi, tel umuman tekshirmaydi.
• pattern butun qiymatga mos kelishi kerak; noto'g'ri regex (masalan [a-z-]) jimgina o'chadi — konsolga qarang.
• Xabarlar brauzer tilida chiqadi, sahifa tilida emas; matnni faqat JavaScript o'zgartiradi.
• novalidate — formada, formnovalidate — tugmada tekshiruvni o'chiradi.
• Brauzer tekshiruvi — qulaylik, server tekshiruvi — majburiy himoya.

Keyingi dars: autocomplete: avtoto'ldirish bilan do'stlashish — brauzer va parol menejeri formangizni bir bosishda to'ldirishi uchun maydonlarga to'g'ri "yorliq" qo'yamiz.

Manbalar

• MDN: "Client-side form validation", "HTML attribute: pattern", "HTML attribute: required" — developer.mozilla.org
• WHATWG HTML: "Constraints" (form validation) — html.spec.whatwg.org
• web.dev: ":user-valid and :user-invalid" — web.dev