JS formani tekshirish

Ushbu loyihada siz tasdiqlash bilan shakl qurasiz.

Shakl har bir kiritish maydoni ostida xato xabarlarini ko‘rsatadi va u hamma narsa haqiqiy bo‘lmaguncha yuborilmaydi.

Siz nimani o‘rganasiz

Shakl maydonlarini JavaScript bilan qanday tekshirish mumkin
Shaklni yuborishni qanday oldini olish mumkin
Kiritish maydonlari ostida xato xabarlarini qanday ko‘rsatish
Elektron pochta va parol qoidalarini qanday tekshirish mumkin

1-qadam - HTML yarating

To‘rtta maydonli va har bir maydon ostida xato xabari bo‘lgan forma yarating.

Misol

O‘zingiz sinab ko‘ring »

2-qadam — CSS qo‘shing

Misol

O‘zingiz sinab ko‘ring »

3-qadam - JavaScript qo‘shish

Har bir maydon uchun obyekt yaratishingiz kerak.

Misol

Xatolarni ko‘rsatish uchun funksiya kerak.

Misol

// Function to Display Error
function showError(el, message) {
el.innerHTML = message;
}

Xato maydonini tozalash uchun sizga funksiya kerak.

Misol

// Function to Clear the Error
function clearError(el) {
el.innerHTML = "";
}

Shaklni tekshirish uchun sizga funksiya kerak.

Misol

// Function to Validate Form
function validateForm() {
return false;
}

Shaklni tasdiqlash uchun sizga kod kerak.

Shaklni tasdiqlash uchun sahifani qayta yuklashni to‘xtatishingiz kerak.

Misol

// Prevent Default Reloading
form.addEventListener("submit", function (event) {
  event.preventDefault();

// Clear Result
  result.innerHTML = "";

// Validate Form
  if (validateForm()) {
    result.innerHTML = "Form is valid!";
    result.className = "ok";
  } else {
    result.innerHTML = "Please fix the errors.";
    result.className = "error";
  }
});

O‘zingiz sinab ko‘ring »

4-qadam - maydonlarni tekshirish

Har bir maydon uchun bitta funksiya yarating.

Ismni tekshirish

// Function to Validate Name
function validateName() {
  let value = nameInput.value.trim();
  if (value.length < 2) {
    showError(nameError, "Name must be at least 2 characters.");
    return false;
  }
  clearError(nameError);
  return true;
}

// Function to Validate Form
function validateForm() {
  let okName = validateName();
  return okName;
}

O‘zingiz sinab ko‘ring »

Email’ni tekshirish

// Function to Validate Email
function validateEmail() {
  let value = emailInput.value.trim();
  if (!(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))) {
    showError(emailError, "Enter a valid email address.");
    return false;
  }
  clearError(emailError);
  return true;
}

// Function to Validate Form
function validateForm() {
  let okName = validateName();
  let okEmail = validateEmail();
  return okName && okEmail;
}

O‘zingiz sinab ko‘ring »

Parolni tekshirish

// Function to Validate Password
function validatePassword() {
  let value = passInput.value;
  if (value.length < 8) {
    showError(passError, "Password must be at least 8 characters.");
    return false;
  }
  clearError(passError);
  return true;
}

// Function to Validate Form
function validateForm() {
  let okName = validateName();
  let okEmail = validateEmail();
  let okPass = validatePassword();
  return okName && okEmail && okPass;
}

O‘zingiz sinab ko‘ring »

Parol tasdig‘ini tekshirish

// Function to Validate Confirm
function validateConfirm() {
  let pass = passInput.value;
  let confirm = confirmInput.value;
  if (confirm === "") {
    showError(confirmError, "Please confirm your password.");
    return false;
  }
  if (confirm !== pass) {
    showError(confirmError, "Passwords do not match.");
    return false;
  }
  clearError(confirmError);
  return true;
}

// Function to Validate Form
function validateForm() {
  let okName = validateName();
  let okEmail = validateEmail();
  let okPass = validatePassword();
  let okConfirm = validateConfirm();
  return okName && okEmail && okPass && okConfirm;
}

O‘zingiz sinab ko‘ring »

Formani tekshirish (yakuniy)

Ushbu misol tugallangan loyihani ko‘rsatadi.

The CSS

The HTML

<!DOCTYPE html>
<html>
<style>
... CSS goes here
</style>

<body>
<h2>Sign Up</h2>

<form id="signupForm">

<div class="field">
  <label>Name:</label><br>
  <input id="name" type="text" placeholder="Your name">
  <p id="nameError" class="error"></p>
</div>

<div class="field">
  <label>Email:</label><br>
  <input id="email" type="text" placeholder="name@example.com">
  <p id="emailError" class="error"></p>
</div>

<div class="field">
  <label>Password:</label><br>
  <input id="password" type="password" placeholder="Min 8 characters">
  <p id="passwordError" class="error"></p>
</div>

<div class="field">
  <label>Confirm Password:</label><br>
  <input id="confirm" type="password" placeholder="Repeat password">
  <p id="confirmError" class="error"></p>
</div>

<p><button type="submit">Create Account</button></p>

</form>

<p id="result"></p>

<script>
// JavaScript goes here
</script>

</body>
</html>

JavaScript

// Create an Object for each Field
const form = document.getElementById("signupForm");
const nameInput = document.getElementById("name");
const emailInput = document.getElementById("email");
const passInput = document.getElementById("password");
const confirmInput = document.getElementById("confirm");
const nameError = document.getElementById("nameError");
const emailError = document.getElementById("emailError");
const passError = document.getElementById("passwordError");
const confirmError = document.getElementById("confirmError");
const result = document.getElementById("result");

// Function to Display Error
function showError(el, message) {
  el.innerHTML = message;
}

// Function to Clear Error
function clearError(el) {
  el.innerHTML = "";
}

// Function to Validate Name
function validateName() {
  let value = nameInput.value.trim();
  if (value.length < 2) {
    showError(nameError, "Name must be at least 2 characters.");
    return false;
  }
  clearError(nameError);
  return true;
}

// Function to Validate Email
function validateEmail() {
  let value = emailInput.value.trim();
  if (!(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))) {
    showError(emailError, "Enter a valid email address.");
    return false;
  }
  clearError(emailError);
  return true;
}

// Function to Validate Password
function validatePassword() {
  let value = passInput.value;
  if (value.length < 8) {
    showError(passError, "Password must be at least 8 characters.");
    return false;
  }
  clearError(passError);
  return true;
}

// Function to Validate Confirm
function validateConfirm() {
  let pass = passInput.value;
  let confirm = confirmInput.value;
  if (confirm === "") {
    showError(confirmError, "Please confirm your password.");
    return false;
  }
  if (confirm !== pass) {
    showError(confirmError, "Passwords do not match.");
    return false;
  }
  clearError(confirmError);
  return true;
}

// Function to Validate Form
function validateForm() {
  let okName = validateName();
  let okEmail = validateEmail();
  let okPass = validatePassword();
  let okConfirm = validateConfirm();
  return okName && okEmail && okPass && okConfirm;
}

// Prevent Default Reloading
form.addEventListener("submit", function (event) {
  event.preventDefault();

// Clear Result
  result.innerHTML = "";

// Validate Form
  if (validateForm()) {
    result.innerHTML = "Form is valid!";
    result.className = "ok";
  } else {
    result.innerHTML = "Please fix the errors.";
    result.className = "error";
  }
});

O‘zingiz sinab ko‘ring »

Umumiy xatolar

Forgetting event.preventDefault()
Kirish qiymatlarini qisqartirmaslik
Foydalanuvchi kiritgan ma’lumotlar bilan innerHTML’dan foydalanish (xabarlar uchun faqat matndan foydalaning)

Mashqlar

1-mashq

Parolda kamida bitta raqam bo‘lishi kerak bo‘lgan qoida qo‘shing.

2-mashq

Foydalanuvchi yozayotgan paytda maydonlarni tekshiring (input hodisasidan foydalaning).

3-mashq

Yaroqli maydonlar yonida yashil xabarni ko‘rsating.

Bonus topshiriqlar (darajani oshiring)

Add password strength indicator (Weak / Medium / Strong)
Hammasi yaroqli bo‘lguncha yuborish tugmasini o‘chiring
Show/hide password button

JavaScript loyihalari

JavaScript Counter LocalStorage-da tiklash va saqlash bilan hisoblagich loyihasi.
JavaScript hodisa tinglovchisi (Event Listener)
onclick o‘rniga hodisa tinglovchisidan foydalanadigan hisoblagich loyihasi.
JavaScript-to-do ro‘yxati Mahalliy xotirada massivda saqlangan bajariladigan ishlar ro‘yxati.
JavaScript Modal qalqib chiquvchi oynasi sahifaning yuqori qismida paydo bo‘ladigan modal qalqib chiquvchi oyna.
JavaScript’da formani tekshirish
Kiritilgan ma’lumotlarni tekshiradigan (validatsiya) HTML forma.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish