استایل‌دهی فیلدهای فرم در CSS با :required، :optional، :valid و :invalid

مقدمه

اعتبارسنجی فرم‌ها در سمت کاربر (Frontend) نسبت به گذشته بسیار ساده‌تر شده است. امروزه می‌توان با استفاده از شبه‌کلاس‌های CSS مانند :required، :optional، :valid و :invalid در کنار ویژگی‌های HTML5 مثل required و pattern، فرم‌هایی جذاب و کاربرپسند طراحی کرد.

این شبه‌کلاس‌ها روی عناصر زیر قابل استفاده هستند:

• input
• textarea
• select

در ادامه با نحوه استفاده از آن‌ها آشنا می‌شویم.

آشنایی با شبه‌کلاس‌های فرم

فرض کنید فرم زیر را داریم:

<form action="#">
  <input type="text" placeholder="نام" required>
  <input type="email" placeholder="ایمیل" required>
  <input type="text" placeholder="نام مستعار">
  <input type="text" placeholder="پیتزای مورد علاقه">
</form>

حالا استایل‌های زیر را اعمال می‌کنیم:

input {
  border: 2px solid;
  border-radius: 4px;
  font-size: 1rem;
  margin: 0.25rem;
  min-width: 125px;
  padding: 0.5rem;
  transition: background-color 0.5s ease-out;
}

input:optional {
  border-color: gray;
}

input:required {
  border-color: black;
}

input:invalid {
  border-color: red;
}

در این مثال:

• فیلدهای اختیاری (:optional) حاشیه خاکستری دارند.
• فیلدهای اجباری (:required) با حاشیه مشکی نمایش داده می‌شوند.
• فیلدهای نامعتبر (:invalid) حاشیه قرمز خواهند داشت.

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

در مثال بالا از نوع ورودی زیر استفاده شده است:

<input type="email">

این نوع ورودی به مرورگر اعلام می‌کند که مقدار واردشده باید یک آدرس ایمیل معتبر باشد.

از آنجایی که ویژگی required نیز روی این فیلد قرار دارد، مرورگر تنها زمانی آن را معتبر (:valid) در نظر می‌گیرد که کاربر یک ایمیل صحیح وارد کرده باشد.

ترکیب با شبه‌کلاس :focus

برای ایجاد تجربه کاربری بهتر می‌توان وضعیت فوکوس (focus) را نیز به استایل‌ها اضافه کرد.

کد CSS را به شکل زیر تغییر می‌دهیم:

input {
  border: 2px solid;
  border-radius: 4px;
  font-size: 1rem;
  margin: 0.25rem;
  min-width: 125px;
  padding: 0.5rem;
  transition: border-color 0.5s ease-out;
}

input:optional {
  border-color: gray;
}

input:required:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

input:required:focus:valid {
  background:
    url("thumbs-up.svg")
    no-repeat
    95% 50%
    lightgreen;

  background-size: 25px;
}

input:focus:invalid {
  background:
    url("warning.svg")
    no-repeat
    95% 50%
    lightsalmon;

  background-size: 25px;
}

این استایل‌ها چه کاری انجام می‌دهند؟

نمایش موفقیت برای فیلدهای معتبر

input:required:valid

فقط روی فیلدهای اجباری که مقدار صحیح دارند اعمال می‌شود.

این موضوع مهم است زیرا فیلدهای اختیاری از نظر مرورگر معمولاً همیشه معتبر محسوب می‌شوند.

نمایش خطا هنگام ورود اطلاعات نامعتبر

input:focus:invalid

زمانی فعال می‌شود که:

• کاربر داخل فیلد قرار گرفته باشد.
• مقدار واردشده معتبر نباشد.

در این حالت می‌توان رنگ پس‌زمینه، آیکون هشدار یا هر افکت دلخواه دیگری را نمایش داد.

نمایش تأیید هنگام ورود اطلاعات صحیح

input:required:focus:valid

زمانی اجرا می‌شود که:

• فیلد اجباری باشد.
• کاربر روی آن فوکوس کرده باشد.
• مقدار واردشده معتبر باشد.

در نتیجه می‌توان یک آیکون تأیید یا رنگ سبز برای راهنمایی کاربر نمایش داد.

آیا می‌توان از ::before و ::after روی input استفاده کرد؟

ممکن است بخواهید به جای استفاده از تصویر پس‌زمینه، از شبه‌عناصر ::before یا ::after استفاده کنید.

اما متأسفانه این روش روی عناصر input کار نمی‌کند.

برای این کار معمولاً از یک عنصر کمکی مانند span در کنار فیلد استفاده می‌شود:

<input type="email">
<span></span>

سپس می‌توان بر اساس وضعیت فیلد، محتوا را به span اضافه کرد:

input:focus:invalid + span::before {
  content: "❌";
}

یا:

input:focus:valid + span::before {
  content: "✅";
}

این تکنیک راهی ساده برای نمایش پیام‌ها و آیکون‌های اعتبارسنجی بدون نیاز به جاوااسکریپت است.

جمع‌بندی

شبه‌کلاس‌های فرم در CSS امکانات قدرتمندی برای اعتبارسنجی و بهبود تجربه کاربری فراهم می‌کنند.

مهم‌ترین آن‌ها عبارت‌اند از:

• :required → فیلدهای اجباری
• :optional → فیلدهای اختیاری
• :valid → فیلدهای دارای مقدار معتبر
• :invalid → فیلدهای دارای مقدار نامعتبر
• :focus → فیلدی که کاربر در حال تعامل با آن است

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

از همراهی شما با پارمین کلود