Forma validatsiyasi — required, min, max, minlength, pattern

~20 daq · HTML · Formalar

Muammodan boshlaylik

Ro'yxatdan o'tish formasi serverga keladi:

ism=
email=ali.mail.uz
parol=123
yosh=-5
telefon=salom

Ism bo'sh, email noto'g'ri, parol juda qisqa, yosh manfiy, telefon — matn. Server xato qaytaradi, sahifa yangilanadi, foydalanuvchi hamma narsani qaytadan yozadi va asabiylashadi.

Ma'lumotni yuborishdan oldin, brauzerning o'zida tekshirish mumkin — bir qator JavaScript siz. Bu validatsiya deb ataladi.

required — majburiy maydon

<label for="ism">Ism</label>
<input id="ism" name="ism" required>

Maydon bo'sh bo'lsa, forma yuborilmaydi va brauzer xabar ko'rsatadi: "Iltimos, bu maydonni to'ldiring". Fokus avtomatik ravishda o'sha maydonga o'tadi.

Turli elementlarda:

<input type="checkbox" name="rozilik" required>     <!-- belgilanishi shart -->

<fieldset>                                           <!-- guruhdan bittasi tanlanishi shart -->
  <legend>Jins</legend>
  <label><input type="radio" name="jins" value="e" required> Erkak</label>
  <label><input type="radio" name="jins" value="a"> Ayol</label>
</fieldset>

<select name="viloyat" required>                     <!-- bo'sh value li variant hisoblanmaydi -->
  <option value="">— Tanlang —</option>
  ...
</select>

Radio guruhida required ni bitta tugmaga yozish kifoya.

[!TIP] Majburiy maydonlarni foydalanuvchiga ko'rsating — odatda label yonida * va formaning boshida "* — majburiy maydonlar" izohi. Faqat rang bilan belgilamang: ko'rish qobiliyati past foydalanuvchilar uni sezmasligi mumkin.

Uzunlik — minlength va maxlength

<label for="parol">Parol (kamida 8 belgi)</label>
<input id="parol" name="parol" type="password" minlength="8" maxlength="64" required>

• minlength — kamida shuncha belgi; kam bo'lsa yuborishda xato
• maxlength — ko'pi bilan; brauzer ortiqcha yozishga yo'l qo'ymaydi
• Bo'sh maydon minlength tekshiruvidan o'tadi — majburiy bo'lsa required ham qo'shing

textarea da ham ishlaydi: <textarea maxlength="500">.

Chegaralar — min, max, step

<label for="yosh">Yosh</label>
<input id="yosh" name="yosh" type="number" min="7" max="100" required>

<label for="sana">Uchrashuv sanasi</label>
<input id="sana" name="sana" type="date" min="2026-11-07" max="2026-12-31">

<label for="summa">Summa (1 000 so'mga karrali)</label>
<input id="summa" name="summa" type="number" min="1000" step="1000">

• min, max — number, range, date, time va boshqa sana turlarida
• step — qiymat min dan boshlab qadamga karrali bo'lishi kerak: step="1000" bilan 2500 — xato
• step="any" — istalgan kasr son

Tur bo'yicha tekshiruv

16-darsdan: ba'zi turlar formatni o'zi tekshiradi:

pattern — o'z qoidangiz

<label for="tel">Telefon (+998 XX XXX XX XX)</label>
<input
  id="tel"
  name="tel"
  type="tel"
  pattern="\+998 ?\d{2} ?\d{3} ?\d{2} ?\d{2}"
  title="Masalan: +998 90 123 45 67"
  required
>

pattern — regular expression (muntazam ifoda): qiymat qanday ko'rinishda bo'lishi kerakligi.

• Qiymat to'liq mos kelishi kerak — ^ va $ avtomatik qo'shiladi
• title — xato xabarida qo'shimcha izoh sifatida ko'rsatiladi
• Faqat matnli turlar: text, tel, email, url, password, search

Ko'p ishlatiladigan namunalar:

[!INFO] pattern dagi muntazam ifodalar JavaScript dagi bilan bir xil sintaksisda va v bayrog'i bilan ishlaydi. Shuning uchun ba'zi belgilar (masalan, [ ichidagi - yoki |) qo'shimcha ekranlashni talab qilishi mumkin. Murakkab ifodalarni avval brauzer konsolida sinab ko'ring.

CSS bilan holatni ko'rsatish

Brauzer har bir maydonning holatini biladi, va CSS uni ko'rsata oladi:

input:invalid {
  border-color: #ef4444;
}

input:valid {
  border-color: #10b981;
}

Muammo: :invalid sahifa ochilishi bilanoq ishlaydi — foydalanuvchi hali hech narsa yozmagan, lekin hamma required maydonlar qizil. Yechim — :user-invalid:

/* faqat foydalanuvchi maydon bilan ishlab bo'lgandan keyin */
input:user-invalid {
  border-color: #ef4444;
}

input:user-invalid + .xato {
  display: block;
}

:user-invalid — foydalanuvchi maydonni o'zgartirib undan chiqqandan yoki formani yuborishga uringandan keyingina ishlaydi. Barcha zamonaviy brauzerlarda mavjud.

JavaScript bilan — Constraint Validation API

HTML validatsiyasini JavaScript dan ham boshqarish mumkin:

const email = document.querySelector('#email');

email.validity.valid          // true / false
email.validity.valueMissing   // required, lekin bo'sh
email.validity.typeMismatch   // email formati noto'g'ri
email.validity.tooShort       // minlength dan kam
email.validity.patternMismatch
email.validationMessage       // brauzerning xabari

form.checkValidity()          // butun forma to'g'rimi
form.reportValidity()         // tekshirib, xabarlarni ko'rsatish

O'z xabaringiz

const parol2 = document.querySelector('#parol2');

parol2.addEventListener('input', () => {
  if (parol2.value !== parol.value) {
    parol2.setCustomValidity('Parollar mos kelmadi');
  } else {
    parol2.setCustomValidity('');     // bo'sh qator — xato yo'q
  }
});

setCustomValidity() — HTML atributlari bilan ifodalab bo'lmaydigan qoidalar uchun: parollar mosligi, sana oralig'i, server tekshiruvi natijasi.

[!WARNING] setCustomValidity('...') dan keyin xato tuzatilganda bo'sh qator bilan tozalashni unutmang. Aks holda maydon abadiy "xato" holatida qoladi va forma hech qachon yuborilmaydi.

novalidate — brauzer tekshiruvini o'chirish

<form novalidate>...</form>

Brauzerning o'z xabarlarini o'chiradi (atributlar va validity ishlayveradi). O'z xato ko'rsatish usulingizni JavaScript bilan yozganda ishlatiladi. Bitta tugma uchun: <button formnovalidate>Qoralama sifatida saqlash</button>.

Eng muhim qoida

[!WARNING] Brauzerdagi validatsiya — foydalanuvchi uchun qulaylik, xavfsizlik emas. DevTools da required ni o'chirish, curl yoki Postman bilan formani chetlab to'g'ridan-to'g'ri so'rov yuborish — bir necha soniyalik ish. Server har doim barcha ma'lumotni qaytadan tekshirishi shart. Brauzer validatsiyasi — tez javob va yaxshi tajriba uchun; server validatsiyasi — himoya uchun. Ikkalasi ham kerak.

To'liq misol

<form action="/royxat" method="post">
  <p>* — majburiy maydonlar</p>

  <label for="ism">Ism *</label>
  <input id="ism" name="ism" autocomplete="name" required minlength="2">

  <label for="email">Email *</label>
  <input id="email" name="email" type="email" autocomplete="email" required>

  <label for="tel">Telefon</label>
  <input id="tel" name="tel" type="tel" pattern="\+998\d{9}" title="Masalan: +998901234567">

  <label for="parol">Parol * (kamida 8 belgi)</label>
  <input id="parol" name="parol" type="password" autocomplete="new-password" required minlength="8">

  <label>
    <input type="checkbox" name="rozilik" required>
    Foydalanish shartlariga roziman *
  </label>

  <button type="submit">Ro'yxatdan o'tish</button>
</form>

Nima uchun shunday?

Server baribir tekshirsa, nima uchun brauzerda ham tekshirish kerak — ikki marta ish emasmi?

Chunki ular turli maqsadlarga xizmat qiladi. Server tekshiruvi — himoya: noto'g'ri yoki zararli ma'lumot bazaga tushmasligi uchun. Brauzer tekshiruvi — tezlik va qulaylik: foydalanuvchi xatoni darhol, aynan o'sha maydon yonida ko'radi, sahifa yangilanmaydi, yozilgan ma'lumot yo'qolmaydi, server keraksiz so'rovlar bilan yuklanmaydi. HTML atributlari bilan bu deyarli bepul: bitta required yozish JavaScript dagi o'nlab qatorni almashtiradi va ekran o'quvchilar bilan ham to'g'ri ishlaydi.

Xulosa

Eslab qoling:

• required — majburiy (input, checkbox, radio guruh, select)
• minlength / maxlength — matn uzunligi
• min / max / step — son va sana chegaralari
• type — email, url, number formatni o'zi tekshiradi
• pattern — regex, to'liq moslik; title — izoh
• CSS: :user-invalid — foydalanuvchi ishlagandan keyin; :invalid — darhol
• JS: validity, checkValidity(), setCustomValidity() (tozalashni unutmang)
• Brauzer validatsiyasi — qulaylik; server validatsiyasi — majburiy

Keyingi bo'lim

4-bo'lim: Accessibility — saytni barcha foydalanuvchilar uchun qulay qilish: ARIA va klaviatura navigatsiyasi.