‏اعتبارسنجی فرم‌ها با سلکتور n of در CSS

شاید تا حالا نیاز داشتی قبل از اینکه کاربر فرم رو submit کنه، یه سری چک‌های اولیه انجام بدی؛ مثلاً دکمه ارسال فقط وقتی فعال بشه که کاربر حداقل چند تا فیلد رو پر کرده باشه. CSS به‌تنهایی می‌تونه این کار رو انجام بده و نیازی به جاوااسکریپت نیست!

سلکتور :nth-child() با سینتکس n of چیه؟

:nth-child() معمولاً المان n‌ام رو از بین همه فرزندان انتخاب می‌کنه. اما وقتی از سینتکس n of selector استفاده می‌کنیم، فقط بین المان‌هایی که اون سلکتور رو دارن می‌شماره. مثلاً:

/* دومین المان از همه */
:nth-child(2) { }

/* دومین المان از بین کلاس‌های marked */
:nth-child(2 of .marked) { }

این یعنی می‌شه فهمید چندتا از المان‌ها یه حالت خاص (state) دارن. مثلاً می‌شه دید که آیا سومین چک‌باکس تیک خورده یا نه:

.list:has(:nth-child(3 of :checked)) {
  /* وقتی سه آیتم تموم شد، یه پیام تشویقی نشون بده */
}

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

فرض کن فرمی داری که کاربر باید حداقل سه فیلد رو پر کنه. برای تشخیص اینکه یه فیلد پر شده یا نه، از این سلکتورها استفاده می‌کنیم:

• برای فیلدهای متنی، ایمیل و URL: :not(:placeholder-shown) — اگه placeholder دیده نمیشه، یعنی فیلد پر شده
• برای رادیو باتن‌ها: :checked
• برای select box: غیاب :checked روی option[value=""]

با :where() می‌شه این سلکتورها رو کوتاه‌تر نوشت:

:where([type="email"], [type="url"], [type="text"]):not(:placeholder-shown) {}

حالا .fieldهایی که پر شدن رو پیدا می‌کنیم:

.field:has(
  :where([type="email"],[type="url"],[type="text"]):not(:placeholder-shown),
  [type="radio"]:checked,
  option[value=""]:not(:checked)
) {}

و در نهایت، وقتی سومین فیلد پر شد، یه پیام نشون می‌دیم:

:nth-child(3 of .field:has(
  :where([type="email"],[type="url"],[type="text"]):not(:placeholder-shown),
  [type="radio"]:checked,
  option[value=""]:not(:checked)
)) {
  /* به کاربر بگو سه تا فیلد رو پر کرده */
}

انعطاف‌پذیری بالا

این تکنیک فقط به این نوع validationها محدود نمیشه. می‌شه از select:valid برای select box اجباری، یا :in-range برای عدد در محدوده min-max هم استفاده کرد. هر pseudo-classای که حالت اعتبارسنجی یه المان رو نشون می‌ده، اینجا به کارت میاد.

نکته مهم درباره سازگاری

یه باگ احتمالی در مرورگرهای WebKit (تا آوریل ۲۰۲۶) وجود داره؛ ممکنه استایل‌دهی مبتنی بر state با این سینتکس اون‌طور که انتظار داری کار نکنه. پیشنهاد میشه نتیجه رو با Firefox هم مقایسه کنی.

نکات کلیدی:

• سینتکس n of selector در :nth-child() فقط بین المان‌های منطبق با سلکتور می‌شماره
• با ترکیب این سینتکس با pseudo-classهای اعتبارسنجی، می‌شه چک کرد چند فیلد پر شده
• :not(:placeholder-shown) برای تشخیص پر بودن فیلدهای متنی کاربرد داره
• این تکنیک کاملاً CSS هست و به جاوااسکریپت نیاز نداره
• در مرورگرهای WebKit ممکنه رفتار غیرمنتظره وجود داشته باشه
• می‌شه از هر سلکتور اعتبارسنجی مثل :valid، :in-range یا :checked در این الگو استفاده کرد