41- آموزش جاوااسکریپت | پروژه عملی : قسمت 3 از 6- پیاده‌سازی اعتبارسنجی و نمایش پیام‌های خطا در پروژه Book List

در بخش‌های قبلی، هسته اصلی برنامه را برای افزودن کتاب به لیست ایجاد کردیم. اما در حال حاضر، اگر کاربر فیلدها را خالی بگذارد، برنامه باز هم سطر خالی به جدول اضافه می‌کند که این رفتار مناسبی نیست. در این بخش، اعتبارسنجی فرم را پیاده‌سازی کرده و یک متد حرفه‌ای برای نمایش پیام‌های وضعیت (Alerts) طراحی می‌کنیم.

اعتبارسنجی فرم

ابتدا باید درون رویداد submit بررسی کنیم که آیا فیلدها مقدار دارند یا خیر. اگر یکی از فیلدها خالی باشد، پیام خطا نمایش می‌دهیم و عملیات ثبت را متوقف می‌کنیم.

document.getElementById('book-form').addEventListener('submit', function(e) {
  const title = document.getElementById('title').value,
        author = document.getElementById('author').value,
        isbn = document.getElementById('isbn').value;

  const book = new Book(title, author, isbn);
  const ui = new UI();

  // اعتبارسنجی
  if (title === '' || author === '' || isbn === '') {
    // نمایش خطای اعتبارسنجی
    ui.showAlert('لطفاً تمامی فیلدها را پر کنید', 'error');
  } else {
    // افزودن کتاب در صورت صحت اطلاعات
    ui.addBookToList(book);
    ui.showAlert('کتاب با موفقیت اضافه شد', 'success');
    ui.clearFields();
  }

  e.preventDefault();
});

پیاده‌سازی متد showAlert

استفاده از alert پیش‌فرض مرورگر اصلاً حرفه‌ای نیست. ما می‌خواهیم پیامی را به‌صورت پویا در DOM ایجاد کنیم. برای این کار متد showAlert را به پروتوتایپ کلاس UI اضافه می‌کنیم.

این متد دو پارامتر دریافت می‌کند: پیام (message) و کلاس CSS (className) که مشخص می‌کند پیام خطا است یا موفقیت.

UI.prototype.showAlert = function(message, className) {
  // ایجاد عنصر div
  const div = document.createElement('div');
  
  // افزودن کلاس‌ها
  div.className = `alert ${className}`;
  
  // افزودن متن پیام
  div.appendChild(document.createTextNode(message));
  
  // دریافت المان‌های والد برای درج در DOM
  const container = document.querySelector('.container');
  const form = document.querySelector('#book-form');
  
  // درج پیام قبل از فرم
  container.insertBefore(div, form);

  // حذف خودکار پیام پس از 3 ثانیه
  setTimeout(function() {
    document.querySelector('.alert').remove();
  }, 3000);
};

توضیح کد:

1. ایجاد المان: با document.createElement('div') یک بلاک جدید می‌سازیم.
2. استایل‌دهی: با استفاده از div.className کلاس alert (برای استایل‌های پایه) و کلاس دریافتی (برای رنگ سبز یا قرمز) را اعمال می‌کنیم.
3. درج در صفحه: با استفاده از متد insertBefore در المان container، پیام را دقیقاً قبل از فرم نمایش می‌دهیم.
4. تایمر (Timeout): با setTimeout پس از ۳۰۰۰ میلی‌ثانیه (۳ ثانیه)، المان پیام را از صفحه حذف می‌کنیم.

جمع‌بندی

در این بخش توانستیم با افزودن منطق اعتبارسنجی، از ورود داده‌های مخرب جلوگیری کنیم و با ساخت یک سیستم نمایش پیام پویا، تجربه کاربری بهتری برای پروژه بسازیم. در بخش بعدی، قابلیت حذف کتاب‌ها را با کلیک روی دکمه حذف پیاده‌سازی خواهیم کرد.