Validation

اعتبارسنجی فرم: از ویژگی‌های HTML5 تا کنترل کامل با جاوااسکریپت

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

اعتبارسنجی داخلی HTML5

با افزودن ویژگی‌هایی مثل required، minlength، maxlength، pattern و type به عناصر ورودی، مرورگر به‌طور خودکار پیش از ارسال فرم بررسی می‌کند که آیا مقدار وارد‌شده معتبر است یا نه:

<form>
  <input type="email" required>
  <input type="text" pattern="[0-9]{10}" title="شماره موبایل ۱۰ رقمی">
  <button type="submit">ارسال</button>
</form>

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

Constraint Validation API

جاوااسکریپت مجموعه‌ای از متدها و ویژگی‌ها در اختیار قرار می‌دهد که به آن Constraint Validation API گفته می‌شود و امکان بررسی و کنترل دستی اعتبار فیلدها را فراهم می‌کند:

متد یا ویژگی	کاربرد
checkValidity()	بررسی معتبر بودن فیلد یا فرم؛ خروجی boolean
reportValidity()	بررسی اعتبار و نمایش پیام خطای مرورگر در صورت نامعتبر بودن
validity	شیئی شامل جزئیات دقیق نوع خطا (مثل valueMissing یا patternMismatch)
setCustomValidity()	تعیین پیام خطای سفارشی برای یک فیلد

بررسی جزئیات خطا با شیء validity

شیء validity روی هر فیلد ورودی، اطلاعات دقیقی درباره‌ی نوع خطا در اختیار می‌گذارد که امکان نمایش پیام‌های خطای متفاوت برای هر شرایط را فراهم می‌کند:

// HTML فرضی:
// <input id="email" type="email" required>

const emailInput = document.getElementById("email");

emailInput.addEventListener("blur", () => {
  const validity = emailInput.validity;

  if (validity.valueMissing) {
    console.log("این فیلد نمی‌تواند خالی باشد");
  } else if (validity.typeMismatch) {
    console.log("فرمت ایمیل صحیح نیست");
  } else if (validity.valid) {
    console.log("مقدار وارد‌شده معتبر است");
  }
});

تعریف پیام خطای سفارشی با setCustomValidity

گاهی نیاز است منطقی فراتر از قابلیت‌های HTML5 بررسی شود؛ مثلاً تطابق دو فیلد رمز عبور. در این موارد، متد setCustomValidity امکان می‌دهد پیام خطای دلخواه تعریف شود که همان رفتار پیام‌های خطای بومی مرورگر را دارد:

const password = document.getElementById("password");
const confirmPassword = document.getElementById("confirmPassword");

confirmPassword.addEventListener("input", () => {
  if (confirmPassword.value !== password.value) {
    confirmPassword.setCustomValidity("رمز عبور با تکرار آن مطابقت ندارد");
  } else {
    confirmPassword.setCustomValidity(""); // پاک کردن خطای قبلی
  }
});

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

غیرفعال کردن اعتبارسنجی خودکار مرورگر

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

<form novalidate>...</form>

نکات کلیدی

• ویژگی‌های HTML5 مثل required و pattern، لایه‌ی اول و ساده‌ی اعتبارسنجی را فراهم می‌کنند.
• متد checkValidity فقط نتیجه‌ی boolean می‌دهد، در حالی که شیء validity جزئیات دقیق نوع خطا را در اختیار می‌گذارد.
• setCustomValidity برای منطق‌های سفارشی مثل تطابق دو فیلد استفاده می‌شود و باید همیشه در صورت رفع مشکل با رشته‌ی خالی پاک‌سازی شود.
• ویژگی novalidate اعتبارسنجی خودکار مرورگر را غیرفعال می‌کند تا کنترل کامل به جاوااسکریپت سپرده شود.

جمع‌بندی

اعتبارسنجی فرم در پروژه‌های واقعی معمولاً ترکیبی از ویژگی‌های داخلی HTML5 و منطق سفارشی جاوااسکریپت است. Constraint Validation API با ابزارهایی مثل شیء validity و متد setCustomValidity، امکان پیاده‌سازی پیام‌های خطای دقیق و اختصاصی را فراهم می‌کند، بدون آنکه نیاز باشد کل فرآیند اعتبارسنجی از صفر بازنویسی شود. در درس بعدی، نحوه‌ی کار با انواع خاص فیلدها مانند چک‌باکس و رادیو باتن بررسی خواهد شد.