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

اعتبارسنجی سمت کلاینت با HTML5 و ویژگی‌های validation

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

اعتبارسنجی فرم تضمین می‌کند که کاربر داده‌های معتبر وارد کند. این کار:

ویژگی required

ویژگی required فیلد را اجباری می‌کند. فرم بدون پر کردن این فیلد ارسال نمی‌شود.

<input type="text" name="username" required>
<input type="email" name="email" required>

ویژگی pattern

ویژگی pattern یک الگوی Regex برای اعتبارسنجی تعیین می‌کند.

<!-- فقط حروف و فاصله -->
<input type="text" pattern="[A-Za-z\s]+" title="فقط حروف مجاز است">

<!-- کد ملی ۱۰ رقمی -->
<input type="text" pattern="[0-9]{10}" title="کد ملی باید ۱۰ رقم باشد">

<!-- شماره موبایل -->
<input type="tel" pattern="09[0-9]{9}" title="شماره موبایل معتبر نیست">

ویژگی‌های min و max

برای اعداد و تاریخ‌ها از min و max استفاده می‌شود.

<!-- سن بین ۱۸ تا ۱۰۰ -->
<input type="number" min="18" max="100">

<!-- تاریخ از امروز به بعد -->
<input type="date" min="2024-01-01">

<!-- حداکثر ۵ کاراکتر -->
<input type="text" maxlength="5">

ویژگی step

ویژگی step گام افزایش مقدار را تعیین می‌کند.

<!-- اعداد زوج -->
<input type="number" step="2">

<!-- زمان با دقیقه -->
<input type="time" step="60">

انواع Input خاص

برخی انواع input به‌طور خودکار اعتبارسنجی می‌شوند:

ویژگی placeholder

متن راهنما که قبل از ورود داده نمایش داده می‌شود.

<input type="text" placeholder="نام خود را وارد کنید">

ویژگی title

متن توضیحی که هنگام خطا نمایش داده می‌شود.

<input type="text" pattern="[A-Za-z]+"
       title="فقط حروف انگلیسی مجاز است">

ویژگی novalidate

روی فرم قرار می‌گیرد تا اعتبارسنجی HTML5 غیرفعال شود (برای اعتبارسنجی سفارشی با JavaScript).

<form novalidate>
  <input type="email" name="email">
  <button type="submit">ارسال</button>
</form>

پیام‌های خطای سفارشی

با JavaScript می‌توان پیام‌های خطای سفارشی ایجاد کرد.

const input = document.getElementById('email');
input.setCustomValidity('لطفاً ایمیل معتبر وارد کنید');

شبه‌کلاس‌های CSS برای اعتبارسنجی

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل HTML است.

ابزارهای مرتبط