طراحی فرم پیشرفته با Vanilla JS

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

چرا Vanilla JS؟

استفاده از جاوااسکریپت خالص به شما امکان کنترل کامل بر روی رفتار فرم‌ها را می‌دهد. برخلاف کتابخانه‌هایی مانند jQuery، در Vanilla JS وابستگی خاصی وجود ندارد و کد شما سبک‌تر و سریع‌تر اجرا می‌شود.

ایجاد فرم اولیه

ابتدا یک فرم ساده در HTML ایجاد کنید:

<form id="advanced-form">
  <label for="username">نام کاربری:</label>
  <input type="text" id="username" name="username" required>

  <label for="email">ایمیل:</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">ارسال</button>
</form>

مدیریت رویدادها

برای مدیریت ارسال فرم، نیاز است که رویداد submit را کنترل کنیم تا بتوانیم اعتبارسنجی‌های سفارشی انجام دهیم:

document.getElementById('advanced-form').addEventListener('submit', function(event) {
  event.preventDefault();

  const username = document.getElementById('username').value;
  const email = document.getElementById('email').value;

  if (!validateUsername(username)) {
    alert('نام کاربری نامعتبر است');
    return;
  }

  if (!validateEmail(email)) {
    alert('ایمیل نامعتبر است');
    return;
  }

  alert('اطلاعات معتبر ارسال شد!');
});

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

اعتبارسنجی اطلاعات ورودی با استفاده از توابع ساده:

function validateUsername(username) {
  return username.length >= 3 && /^[a-zA-Z0-9]+$/.test(username);
}

function validateEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

بهبود تجربه کاربری (UX)

برای بهبود تجربه کاربری، می‌توانید از ویژگی‌های زیر استفاده کنید:

• اضافه کردن پیام‌های خطا در کنار فیلدها.
• استفاده از حالت‌های فعال (focus) برای فیلدهای ورودی.
• اعمال انیمیشن هنگام نمایش پیام‌ها.

// نمایش پیام خطا زیر فیلد ورودی
function showError(input, message) {
  const errorElement = document.createElement('span');
  errorElement.className = 'error-message';
  errorElement.textContent = message;

  input.parentNode.appendChild(errorElement);
}

// پاک کردن پیام خطا قبلی
function clearErrors() {
  const errors = document.querySelectorAll('.error-message');
  errors.forEach(error => error.remove());
}

جمع‌بندی

در این مقاله یاد گرفتیم که چگونه یک فرم پیشرفته را با استفاده از جاوااسکریپت خالص طراحی کنیم و آن را بهینه کنیم. این روش نه تنها باعث کاهش حجم کد می‌شود بلکه کنترل بیشتری بر روی عملکرد دارد. تمرین کنید و ویژگی‌های بیشتری اضافه کنید تا مهارت خود را ارتقا دهید!