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

اما ساخت فرم فقط به ظاهرش ختم نمی‌شود. باید مطمئن باشی:

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

همه این‌ها در دنیای برنامه‌نویسی تحت عنوان Form Handling و Form Validation شناخته می‌شود. در این مقاله، می‌خواهیم نگاه کلی به این موضوع بیندازیم. سپس در مقالات فرزند هر بخش را عمیق‌تر بررسی خواهیم کرد.

✅ چرا Form Validation مهم است؟

  • جلوی ورود داده‌های اشتباه یا ناقص را می‌گیرد.
  • تجربه کاربری (UX) را بهتر می‌کند.
  • امنیت سایت را بالا می‌برد.
  • باعث می‌شود داده‌های ثبت‌شده تمیز و قابل‌استفاده باشند.

تصور کن بدون Validation کاربر این ایمیل را وارد کند:

ali@@gmail

و تو هم بدون بررسی آن را در دیتابیس ذخیره کنی! این یعنی داده‌های بی‌ارزش و کلی مشکل.

✅ چه کارهایی در Form Handling انجام می‌دهیم؟

حالا ببینیم در جاوااسکریپت چه کارهایی برای مدیریت فرم انجام می‌دهیم. در این مقاله به‌صورت کلی توضیح می‌دهیم و در مقالات فرزند، هر بخش را مفصل بررسی خواهیم کرد.

🔶 ۱. خواندن مقدار input

اولین قدم در مدیریت فرم، خواندن داده‌های واردشده توسط کاربر است. مثلاً وقتی کاربر نام یا ایمیلش را وارد می‌کند، باید بتوانیم آن را بخوانیم.

value

برای Inputهای ساده مثل Text, Email, Password:

let name = document.querySelector("#username").value;

checked (برای radio و checkbox)

برای Radio و Checkbox مهم است بفهمیم انتخاب شده‌اند یا نه:

let isChecked = document.querySelector("#accept").checked;

selectedIndex, value (برای select)

برای DropDown‌ها (select) می‌خواهیم بدانیم کاربر چه گزینه‌ای را انتخاب کرده:

let city = document.querySelector("#cities").value;

یا:

let index = document.querySelector("#cities").selectedIndex;

همه این مفاهیم را در مقاله فرزند خواندن مقادیر فرم در جاوااسکریپت مفصل بررسی خواهیم کرد.

🔶 ۲. اعتبارسنجی فرم (Form Validation)

بعد از خواندن داده‌ها، باید بررسی کنیم آیا داده‌ها درست هستند یا نه؟ این همان Validation است.

بررسی خالی بودن فیلد

بعضی فیلدها نباید خالی باشند:

if (name === "") {
  console.log("Name is required");
}

بررسی طول کاراکترها

مثلاً رمز عبور نباید کمتر از ۸ کاراکتر باشد:

if (password.length < 8) {
  console.log("Password too short");
}

بررسی فرمت ایمیل (Regex)

یکی از رایج‌ترین Validationها، بررسی فرمت ایمیل است. مثلاً:

let regex = /^\S+@\S+\.\S+$/;
if (!regex.test(email)) {
  console.log("Invalid email");
}

بررسی password strength

خیلی وقت‌ها می‌خواهیم رمز عبور قوی باشد:

  • حروف بزرگ و کوچک داشته باشد
  • عدد داشته باشد
  • علامت خاص داشته باشد

این را هم با Regex بررسی می‌کنیم.

جلوگیری از ارسال فرم

مهم‌ترین قدم در Validation این است که اگر فرم معتبر نبود، اجازه ارسال فرم را ندهیم.

form.addEventListener("submit", function(e) {
  e.preventDefault();
  console.log("Form stopped!");
});

این یکی از مهم‌ترین ابزارهای مدیریت فرم است که در مقاله فرزند اعتبارسنجی فرم در جاوااسکریپت کامل بررسی خواهیم کرد.

🔶 ۳. نمایش پیام‌های خطا

خیلی مهم است که کاربر بداند کجای فرم اشتباه است.

اضافه یا تغییر متن خطا در DOM

مثلاً وقتی نام خالی است، یک متن خطا زیر فیلد نشان دهیم:

document.querySelector("#error").textContent = "Name is required";

استایل‌دهی به فیلدهای نامعتبر

علاوه بر متن، بهتر است فیلدهای نامعتبر را با رنگ یا Border قرمز مشخص کنیم:

document.querySelector("#username").classList.add("error-border");

این‌ها هم در مقاله فرزند نمایش پیام‌های خطا در فرم توضیح داده خواهد شد.

🎯 جمع‌بندی

مدیریت فرم‌ها یکی از مهم‌ترین و حساس‌ترین بخش‌های توسعه وب است. بدون Validation:

  • داده‌های بی‌ارزش در سیستم ذخیره می‌شود.
  • کاربران سردرگم می‌شوند.
  • امنیت سایت پایین می‌آید.

اما وقتی Validation را درست پیاده کنی:

  • فرم‌ها حرفه‌ای به‌نظر می‌رسند.
  • امنیت سایت بالا می‌رود.
  • تجربه کاربری عالی می‌شود.

در این مقاله سعی کردیم تصویری کلی از دنیای Form Handling و Validation بدهیم. حالا وقت آن است که در مقالات فرزند، هر بخش را به‌صورت تخصصی یاد بگیری.