وقتی مرورگر خودش جلوی اشتباه کاربر رو میگیره
تا اینجا فرمهای زیادی ساختیم، اما هیچوقت جلوی این رو نگرفتیم که کاربر یه فیلد رو خالی بذاره یا یه مقدار نامعتبر وارد کنه. یکی از بزرگترین قابلیتهای HTML5 اینه که بدون نیاز به نوشتن حتی یه خط جاوااسکریپت، میشه یه سری قانون اعتبارسنجی پایه رو مستقیم تو خود HTML تعریف کرد. تو این درس با مهمترین این ویژگیها آشنا میشیم.
ویژگی required: اجباریکردن یه فیلد
<label for="email">ایمیل</label>
<input type="email" id="email" name="email" required>ویژگی required یه فیلد رو اجباری میکنه؛ یعنی اگه کاربر بخواد فرم رو ارسال کنه اما این فیلد خالی باشه، مرورگر بهصورت خودکار جلوی ارسال رو میگیره و یه پیام خطا (معمولاً یه حباب کوچیک کنار همون فیلد) نشون میده، بدون اینکه حتی یه درخواست به سرور فرستاده بشه.
ویژگی min و max: محدودهی عددی یا تاریخی
<label for="age">سن</label>
<input type="number" id="age" name="age" min="18" max="65">همونطور که تو درس ۷-۲ اشاره کردیم، ویژگیهای min و max محدودهی مجاز مقدار عددی رو مشخص میکنن. اگه کاربر عددی خارج از این بازه وارد کنه (مثلاً ۱۲ یا ۷۰)، مرورگر جلوی ارسال فرم رو میگیره. این دو ویژگی رو تاریخ (type="date") هم میشه استفاده کرد؛ مثلاً محدودکردن انتخاب تاریخ به یه بازهی مشخص.
<input type="date" name="event_date" min="2025-01-01" max="2025-12-31">ویژگی minlength و maxlength: محدودهی طول متن
<label for="username">نام کاربری</label>
<input type="text" id="username" name="username" minlength="4" maxlength="20">این دو ویژگی حداقل و حداکثر تعداد کاراکتر مجاز رو برای فیلدهای متنی مشخص میکنن. تو این مثال، نام کاربری باید حداقل ۴ و حداکثر ۲۰ کاراکتر داشته باشه.
ویژگی pattern: اعتبارسنجی با الگوی سفارشی
<label for="postal_code">کد پستی</label>
<input type="text" id="postal_code" name="postal_code" pattern="[0-9]{10}" title="کد پستی باید دقیقاً ۱۰ رقم باشد">ویژگی pattern قدرتمندترین ابزار اعتبارسنجی HTML5 هست؛ با استفاده از یه عبارت باقاعده (Regular Expression) مشخص میکنی مقدار واردشده باید دقیقاً چه فرمتی داشته باشه. تو این مثال، [0-9]{10} یعنی «دقیقاً ۱۰ کاراکتر، که همهشون باید عدد باشن». اگه کاربر چیزی غیر از این فرمت وارد کنه (مثلاً حروف یا تعداد رقم اشتباه)، مرورگر جلوی ارسال رو میگیره.
ویژگی title که کنار pattern اومده، یه توضیح متنی میده که معمولاً تو پیام خطای مرورگر یا بهعنوان تولتیپ نشون داده میشه؛ این کمک میکنه کاربر بفهمه دقیقاً باید چه فرمتی رو وارد کنه.
اعتبارسنجی خودکار بر اساس type
یه نکتهی مهم که تو درس ۷-۲ هم دیدیم اینه که بعضی از type ها خودشون یه اعتبارسنجی پایه دارن، بدون نیاز به pattern:
<input type="email" name="email" required>
<input type="url" name="website">تو type="email"، مرورگر خودش چک میکنه که متن واردشده حداقل فرمت ابتدایی یه ایمیل (وجود @ و دامنه) رو داشته باشه. تو type="url" هم مرورگر بررسی میکنه که مقدار، یه آدرس اینترنتی معتبر (با http:// یا https://) باشه.
یه مثال ترکیبی از چند ویژگی اعتبارسنجی
<form action="/register" method="post">
<label for="username">نام کاربری</label>
<input type="text" id="username" name="username" required minlength="4" maxlength="20">
<label for="email">ایمیل</label>
<input type="email" id="email" name="email" required>
<label for="age">سن</label>
<input type="number" id="age" name="age" min="18" max="99" required>
<button type="submit">ثبتنام</button>
</form>تو این فرم، سه تا فیلد داریم که هرکدوم قوانین اعتبارسنجی خاص خودشون رو دارن؛ اگه کاربر روی «ثبتنام» کلیک کنه و هرکدوم از این قوانین رعایت نشده باشه، مرورگر خودش جلوی ارسال رو میگیره و دقیقاً مشخص میکنه کدوم فیلد مشکل داره.
مهم: اعتبارسنجی HTML5 جایگزین اعتبارسنجی سمت سرور نیست
یه نکتهی حیاتی که باید همیشه تو ذهن داشته باشی: اعتبارسنجی HTML5 فقط تو مرورگره و برای راحتی و تجربهی بهتر کاربره؛ اما هیچوقت نباید بهش بهعنوان تنها لایهی امنیتی اعتماد کرد. یه کاربر مخرب میتونه بهراحتی این اعتبارسنجی مرورگری رو دور بزنه (مثلاً با ارسال مستقیم درخواست بدون استفاده از فرم واقعی). به همین دلیل، همیشه باید سمت سرور هم دادهها دوباره بررسی و اعتبارسنجی بشن؛ چیزی که خارج از بحث HTML و مربوط به برنامهنویسی سمت سرور (که تو دورههای دیگه بررسی میشه) هست.
غیرفعالکردن اعتبارسنجی با novalidate
<form action="/submit" method="post" novalidate>
<!-- ورودیها -->
</form>ویژگی novalidate روی خود تگ form، تمام اعتبارسنجیهای خودکار HTML5 رو برای کل فرم غیرفعال میکنه. این معمولاً وقتی استفاده میشه که بخوای اعتبارسنجی رو کاملاً با جاوااسکریپت سفارشی، بهجای رفتار پیشفرض مرورگر، مدیریت کنی.
چند اشتباه رایج
- اعتماد کامل به اعتبارسنجی HTML5 و فراموشکردن اعتبارسنجی سمت سرور، که یه ریسک امنیتی جدیه.
- استفاده از pattern پیچیده بدون نوشتن title، که باعث میشه کاربر ندونه دقیقاً چه فرمتی موردنیازه.
- اجباریکردن (required) فیلدهایی که واقعاً ضروری نیستن، که تجربهی کاربری رو بیدلیل سختتر میکنه.
بهترین روشها
- از required فقط برای فیلدهایی استفاده کن که واقعاً بدونشون فرم بیمعنیه.
- همیشه کنار pattern، یه title توضیحی بذار تا کاربر بفهمه چه فرمتی موردنیازه.
- هیچوقت فقط به اعتبارسنجی HTML5 (سمت مرورگر) اکتفا نکن؛ همیشه سمت سرور هم دادهها رو بررسی کن.
نکتهی سئو
ویژگیهای اعتبارسنجی تأثیر مستقیمی روی سئو ندارند، اما فرمهای ثبتنام یا تماس با ما که با خطای کمتری پر میشوند (به لطف اعتبارسنجی درست) نرخ تکمیل موفق فرم و رضایت کاربر را افزایش میدهند.
نکتهی دسترسیپذیری
پیامهای خطای خودکار مرورگر (که از required، pattern و امثالش میآیند) معمولاً توسط صفحهخوانها هم خوانده میشوند؛ این کار به کاربران نابینا هم کمک میکند بفهمند کدام فیلد مشکل دارد، بدون نیاز به بررسی بصری صفحه.
جمعبندی
HTML5 با ویژگیهایی مثل required، min، max، minlength، maxlength و pattern، امکان اعتبارسنجی پایهی فرمها را بدون نیاز به جاوااسکریپت فراهم میکند. این اعتبارسنجی صرفاً سمت مرورگر است و باید همیشه با اعتبارسنجی سمت سرور تکمیل شود تا امنیت واقعی دادهها تضمین گردد.