Loyiha: Formani Tekshirish (Validation)

Ushbu loyihada biz foydalanuvchi ma'lumotlarini (ism, email, parol) real vaqtda tekshiradigan va xato bo'lsa, ularni ko'rsatadigan shaklni (form) yaratamiz.

---

Loyiha maqsadi

• Ma'lumotlar kiritilmaganda yoki noto'g'ri bo'lganda formani yuborilishini to'xtatish.
• Foydalanuvchiga tushunarli xato xabarlarini ko'rsatish.
• Email va parolni ma'lum shartlar asosida tekshirish.

---

1-qadam: HTML formasi

Forma ichiga maydonlar (input) va xato xabarlari uchun bo'sh joylar qo'shib olamiz:

<form id="signupForm" class="validation-form">
  <div class="field">
    <label>Ism:</label>
    <input id="name" type="text" placeholder="Ismingizni kiriting" />
    <p id="nameError" class="error-msg"></p>
  </div>

  <div class="field">
    <label>Email:</label>
    <input id="email" type="text" placeholder="misol@mail.com" />
    <p id="emailError" class="error-msg"></p>
  </div>

  <div class="field">
    <label>Parol:</label>
    <input id="password" type="password" placeholder="Kamida 8 ta belgi" />
    <p id="passwordError" class="error-msg"></p>
  </div>

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

---

2-qadam: JavaScript mantiqi

Ma'lumotlarni tekshiruvchi funksiyalarni ketma-ket yozamiz:

const form = document.getElementById('signupForm')
const nameInput = document.getElementById('name')
const emailInput = document.getElementById('email')
const passInput = document.getElementById('password')

// Xato xabarlari uchun joylar
const nameError = document.getElementById('nameError')
const emailError = document.getElementById('emailError')
const passError = document.getElementById('passwordError')

// Tekshiruv funksiyalari
function validateName() {
  let val = nameInput.value.trim()
  if (val.length < 2) {
    nameError.innerText = "Ism kamida 2 ta harfdan iborat bo'lishi shart!"
    return false
  }
  nameError.innerText = ''
  return true
}

function validateEmail() {
  let val = emailInput.value.trim()
  let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailRegex.test(val)) {
    emailError.innerText = "Email formati noto'g'ri!"
    return false
  }
  emailError.innerText = ''
  return true
}

function validatePassword() {
  let val = passInput.value
  if (val.length < 8) {
    passError.innerText = "Parol kamida 8 ta belgidan iborat bo'lishi kerak!"
    return false
  }
  passError.innerText = ''
  return true
}

// Formani yuborish hodisasi
form.addEventListener('submit', function (event) {
  event.preventDefault() // Sahifa yangilanishini to'xtatish

  let isNameOk = validateName()
  let isEmailOk = validateEmail()
  let isPassOk = validatePassword()

  if (isNameOk && isEmailOk && isPassOk) {
    document.getElementById('formResult').innerText =
      "Muvaffaqiyatli o'tdingiz!"
    document.getElementById('formResult').style.color = 'green'
  } else {
    document.getElementById('formResult').innerText =
      'Iltimos, xatolarni tuzating.'
    document.getElementById('formResult').style.color = 'red'
  }
})

---

Muhim usullar

event.preventDefault()

Bu metod formaning sukut bo'yicha bajaradigan ishini (sahifani qayta yuklash) to'xtatadi. Bu bizga JavaScript orqali ma'lumotlarni tekshirishga imkon beradi.

trim()

Foydalanuvchi bilmasdan bosib yuborgan ortiqcha bo'shliqlarni (probel) olib tashlash uchun ishlatiladi.

Regex (Muntazam ifodalar)

Emailni tekshirish uchun ishlatilgan /^[^\s@]+@[^\s@]+\.[^\s@]+$/ ifodasi email manzilida @ belgisi va nuqta borligini tekshiradi.

---

Topshiriq

Foydalanuvchi ma'lumot yozayotgan vaqtidayoq (tugmani bosmasdan) xatolarni ko'rsatadigan qilib o'zgartiring. Buning uchun input hodisasidan foydalaning.