آموزش جاوااسکریپت | فصل ۱۴: کار با فرم‌ها و اعتبارسنجی (Form & Validation) به زبان ساده

مقدمه

حتماً دیده‌ای وقتی در سایت‌ها فرم ثبت‌نام یا تماس پر می‌کنی و برخی فیلدها درست نباشد، یک پیام خطا نمایش داده می‌شود و فرم ارسال نمی‌شود. این اسمش “اعتبارسنجی فرم” است و با جاوااسکریپت بسیار راحت قابل انجام است! تو هم می‌تونی همین قابلیت حرفه‌ای را به فرم‌های سایت اضافه کنی که فقط داده‌های صحیح ارسال شوند.

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

مثلاً می‌خواهیم مطمئن شویم:

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

پیش نیاز اموزش بعد:

وقتی کاربر داخل یک input چیزی می‌نویسد، ممکن است ناخواسته فاصله (space) در اول یا آخر متن بزند، مثل “‌ ali “.

تابع trim() این فاصله‌های اضافه را حذف می‌کند و متن تمیز را به ما می‌دهد.

اضافه کردن اعتبارسنجی ساده به فرم

نمونه فرم ثبت‌نام:

<form id="registerForm">
  <input type="text" id="username" placeholder="نام کاربری"><br>
  <input type="email" id="email" placeholder="ایمیل"><br>
  <button type="submit">ثبت‌نام</button>
</form>
<div id="errorBox"></div>

جاوااسکریپت:

var form = document.getElementById("registerForm");
var errorBox = document.getElementById("errorBox");

form.addEventListener("submit", function(event){
  event.preventDefault();   // جلوی رفرش شدن صفحه را می‌گیرد

  var username = document.getElementById("username").value.trim();
  var email = document.getElementById("email").value.trim();

  // پاک کردن پیام‌های قبلی
  errorBox.innerHTML = "";

  // شرط‌ها و اعتبارسنجی‌ها
  if(username === ""){
    errorBox.innerHTML = "لطفاً نام کاربری را وارد کنید.";
    return;
  }

  if(email === ""){
    errorBox.innerHTML = "لطفاً ایمیل را وارد کنید.";
    return;
  }

  // بررسی ساختار صحیح ایمیل با یک الگوی ساده
  var emailPattern = /^[^@]+@[^@]+\.[a-zA-Z]{2,}$/; //این یک عبارت با قاعده هست که خودش می تونه یک اموزش جدا باشد.
  if(!emailPattern.test(email)){
    errorBox.innerHTML = "لطفاً یک ایمیل معتبر وارد کنید.";
    return;
  }

  // اگر همه چیز درست بود:
  errorBox.innerHTML = "ثبت‌نام با موفقیت انجام شد!";
});

نکات و ترفندها

• همیشه event.preventDefault() را فراموش نکن!
• از توابع مختلف مثل trim، یا regex برای اعتبارسنجی حرفه‌ای‌تر می‌توانی استفاده کنی.
• می‌توانی پیام خطا را با رنگ قرمز و پیام موفقیت را با رنگ سبز نمایش دهی (با CSS).

تمرین سریع

یک فرم ساده بساز که فقط شماره تلفن بگیرد. اگر کاربر چیزی غیر از عدد وارد کرد اخطار دهد و ارسال نشود.

جمع‌بندی

• یاد گرفتی چطور با جاوااسکریپت، اعتبارسنجی فرم را قبل از ارسال انجام دهی.
• از این ابزارها در پروژه‌های واقعی مثل ثبت‌نام، لاگین، تماس و … حتماً استفاده کن تا فرم‌های حرفه‌ای و کاربرپسند بسازی.

برای اشنایی بیشتر با عبارات با قاعده (Regular Expression / Regex) یک مقاله در سایت هست.