اعتبارسنجی فرم در سال ۲۰۲۶: از استفاده غیرضروری از کتابخانهها دست بکشید
در سال ۲۰۲۶، برای اعتبارسنجی یک فرم نیازی به یک کتابخانه سنگین JavaScript ندارید.
من ماه گذشته یک فرم پرداخت (checkout) را بدون استفاده از هیچ کتابخانه اعتبارسنجیای عرضه کردم. این فرم فیلدهای اجباری، ساختار ایمیل و طول رمز عبور را تنها با استفاده از HTML بومی و ۳۰ خط کد JavaScript مدیریت کرد.
قبل از اینکه دستور npm install را اجرا کنید، از این شش ویژگی (attribute) بومی برای حل اکثر مشکلات استفاده کنید:
• required: از ارسال فرم با فیلدهای خالی برای متنها، لیستهای کشویی (selects) و چکباکسها جلوگیری میکند.
• type: از type="email" یا type="url" برای شناسایی اشتباهات اولیه در فرمت استفاده کنید.
• minlength و maxlength: محدودیت تعداد کاراکترها را بدون نیاز به منطق سفارشی اعمال میکنند.
• min، max و step: محدودههای اعداد و تاریخها را کنترل میکنند.
• pattern: از regex برای اعمال فرمتهای خاص مانند کد پستی استفاده میکند.
• inputmode و autocomplete: با نمایش کیبورد مناسب یا پر کردن دادههای شناختهشده، خطاها را کاهش میدهند.
اگر پیامهای بومی بیش از حد کلی هستند، از Constraint Validation API استفاده کنید.
هر ورودی (input) یک شیء validity دارد. میتوانید ویژگیهایی مانند valueMissing یا typeMismatch را برای نوشتن پیامهای خطای مفید بررسی کنید. از setCustomValidity برای نمایش متن اختصاصی خودتان استفاده کنید.
فراموش نکنید که پیام سفارشی خود را در رویداد input پاک کنید. در غیر این صورت، فیلد حتی پس از اصلاح توسط کاربر، در وضعیت خطا باقی میماند.
برای استایلدهی، از استفاده از JavaScript برای ردیابی اینکه آیا یک فیلد "touched" شده است یا خیر، دست بکشید.
اکنون شبهکلاس (pseudo-class) :user-invalid در CSS این کار را انجام میدهد. این کلاس تنها پس از تعامل کاربر با فیلد، استایلها را اعمال میکند. آن را با انتخابگر :has() ترکیب کنید تا متن خطا را بهطور خودکار نمایش دهید. این کار دهها خط کد غیرضروری را حذف میکند.
چه زمانی واقعاً باید از یک کتابخانه استفاده کرد؟
تنها در دو مورد خاص به سراغ یک کتابخانه بروید:
۱. اعتبارسنجی بینفیلدی (Cross-field validation): زمانی که یک فیلد به فیلد دیگری وابسته است، مانند "تأیید رمز عبور" یا منطقهای شرطی پیچیده. ۲. اعتبارسنجی ناهمگام (Async validation): زمانی که نیاز به بررسی یک پایگاه داده دارید، مانند "آیا این نام کاربری قبلاً گرفته شده است؟"
اگر فرم شما فقط به قوانین تکفیلدی نیاز دارد، از روشهای بومی استفاده کنید. کد کمتر به معنای باگهای کمتر است. با مرورگر شروع کنید. تنها زمانی کتابخانه اضافه کنید که مرورگر به محدودیت خود برسد.
Optional learning community: https://t.me/GyaanSetuAi