پروژه جاوااسکریپت برای مبتدی ها؛ فرم با اعتبارسنجی

اگر یک صفحه با HTML و CSS ساخته اید، قدم بعدی می تواند یک رفتار کوچک و قابل آزمون باشد. در این پروژه جاوااسکریپت، فرم انتخاب مسیر می سازیم: نام نمایشی، ایمیل آزمایشی و یک انتخاب. مرورگر ورودی نامعتبر را متوقف می کند و جاوااسکریپت برای نام و نتیجه نهایی پیام مشخص می سازد.

این نمونه آموزشی است؛ حساب کاربری نمی سازد و اطلاعات را در سرور ذخیره نمی کند. برای اجرا از داده ساختگی مثل learner@example.test استفاده کنید. اگر هنوز با عناصر پایه آشنا نیستید، از ساخت اولین صفحه با HTML و CSS شروع کنید و جای این تمرین را در نقشه راه طراحی سایت ببینید.

خروجی و پیش نیاز پروژه چیست؟

با label و input، انتخاب عنصر با شناسه و رویداد آشنا می شوید. لازم نیست ابتدا یک چارچوب جاوااسکریپت نصب کنید. یک پوشه تمرینی جدید، مرورگر و ویرایشگر متن کافی است. دو فایل زیر را در همان پوشه بسازید؛ نام فایل ها دقیقاً با ارجاع داخل HTML یکسان باشد.

قاعده پذیرش ساده است: نام پس از حذف فاصله ابتدا و انتها دست کم دو نویسه داشته باشد، ایمیل از نظر قالب ورودی مرورگر معتبر باشد و مسیر انتخاب شود. این بررسی، وجود واقعی نشانی ایمیل یا هویت شخص را ثابت نمی کند.

گام اول: ساختار HTML و ارتباط برچسب ها

کد زیر را در index.html ذخیره کنید. ویژگی for هر label به id همان ورودی متصل است. گزینه خالیِ select باعث می شود required واقعاً انتخاب مسیر را بررسی کند. برای این نمونه، فیلدها name ندارند چون داده ای برای ارسال به سرور طراحی نشده است.

<!doctype html>
<html lang="fa" dir="rtl">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>تمرین فرم جاوااسکریپت</title>
<style>
  body { font-family: sans-serif; max-width: 32rem; margin: 2rem auto; padding: 1rem; }
  label, input, select, button { display: block; box-sizing: border-box; width: 100%; }
  input, select, button { margin: .5rem 0 1rem; padding: .75rem; font: inherit; }
</style>
<h1>فرم تمرینی انتخاب مسیر</h1>
<p>این نمونه فقط اعتبارسنجی را تمرین می کند و ثبت نام واقعی ندارد.</p>
<form id="practice-form">
  <label for="full-name">نام نمایشی</label>
  <input id="full-name" required minlength="2" maxlength="60" autocomplete="off">
  <label for="email">ایمیل آزمایشی</label>
  <input id="email" type="email" required dir="ltr" autocomplete="off">
  <label for="goal">مسیر مورد علاقه</label>
  <select id="goal" required>
    <option value="">یک مسیر انتخاب کنید</option>
    <option value="web">طراحی وب</option>
    <option value="python">پایتون</option>
  </select>
  <button type="submit">بررسی فرم</button>
  <p id="result" role="status" aria-live="polite"></p>
</form>
<script src="app.js" defer></script>
</html>

ویژگی required و نوع email را از خود HTML می گیریم. این امکانات، بخش مهمی از اعتبارسنجی اولیه را بدون بازنویسی قواعد مرورگر انجام می دهند. ناحیه نتیجه هم role و aria-live دارد تا پیام به روزشده برای فناوری های کمکی قابل اعلام باشد. دسترسی با صفحه کلید را در پایان واقعاً امتحان کنید.

گام دوم: اتصال جاوااسکریپت و پیام نتیجه

کد بعدی را در app.js ذخیره کنید. ویژگی defer در فایل HTML کمک می کند عناصر صفحه هنگام اجرای این کد در دسترس باشند.

const form = document.getElementById("practice-form");
const fullName = document.getElementById("full-name");
const result = document.getElementById("result");

function validateName() {
  const isValid = fullName.value.trim().length >= 2;
  fullName.setCustomValidity(isValid ? "" : "نام را با حداقل دو نویسه وارد کنید.");
}

fullName.addEventListener("input", validateName);
form.addEventListener("input", () => { result.textContent = ""; });
validateName();

form.addEventListener("submit", (event) => {
  event.preventDefault();
  result.textContent = "ورودی ها معتبرند؛ این تمرین هیچ داده ای به سرور نمی فرستد.";
});

رویداد input با ویرایش نام، قاعده سفارشی را دوباره بررسی می کند. setCustomValidity با پیام غیرخالی، ورودی را نامعتبر می کند؛ وقتی مشکل رفع شد، رشته خالی آن خطای سفارشی را پاک می کند. اگر این پاک کردن را فراموش کنید، فرم با وجود اصلاح نام همچنان نامعتبر باقی می ماند.

در ارسال عادی فرم، مرورگر ابتدا قواعد اعتبارسنجی را کنترل می کند. اگر ورودی ها معتبر باشند، رویداد submit این نمونه اجرا می شود. preventDefault جلوی ارسال پیش فرض را می گیرد و فقط پیام تمرین نمایش داده می شود. برای درج متن نتیجه از textContent استفاده کرده ایم؛ در این پروژه نیازی به تفسیر ورودی کاربر به عنوان HTML نیست.

گام سوم: آزمون با پنج حالت مشخص

1. همه فیلدها خالی باشند: فرم نباید پیام موفقیت نشان دهد.
2. نام فقط چند فاصله باشد: پیام حداقل دو نویسه ظاهر شود.
3. ایمیل مانند hello باشد: مرورگر قالب نامعتبر را گزارش کند.
4. نام و ایمیل درست باشند اما مسیر انتخاب نشود: فرم پذیرفته نشود.
5. نام، ایمیل ساختگی معتبر و مسیر انتخاب شده باشند: پیام معتبر بودن ورودی ها ظاهر شود و هیچ ثبت نامی صورت نگیرد.

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

اگر نتیجه درست نبود، چه چیزی را بررسی کنیم؟

اگر هیچ پیامی نمی بینید، نام app.js و مسیر فایل را کنترل کنید و بخش Console ابزار توسعه مرورگر را ببینید. خطای «عنصر پیدا نشد» می تواند از تفاوت id در HTML و جاوااسکریپت بیاید. اگر نام اصلاح شده همچنان رد می شود، مطمئن شوید setCustomValidity در حالت معتبر با رشته خالی فراخوانی شده است.

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

مرز این تمرین با ثبت نام واقعی

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

برای تمرین طراحی ظاهر همین صفحه، پروژه واکنش گرای HTML و CSS را ببینید. برای دریافت بازخورد و انتخاب گام بعد، کلاس های برنامه نویسی آکادمی گلجام را بررسی کنید.

مرجع تکمیلی: راهنمای Constraint Validation در MDN.