شبه کلاس های :user-valid و :user-invalid، شبه کلاس های :user-valid و :user-invalid

:user-valid

پشتیبانی مرورگر

  • کروم: 119.
  • لبه: 119.
  • فایرفاکس: 88.
  • سافاری: 16.5.

منبع

:user-invalid

پشتیبانی مرورگر

  • کروم: 119.
  • لبه: 119.
  • فایرفاکس: 88.
  • سافاری: 16.5.

منبع

ورودی کاربر یکی از حساس ترین نگرانی ها در هر رابط کاربری است. یک برنامه کاربردی باید به کاربران کمک کند تا اشتباهات ورودی خود را ببینند، درک کنند و برطرف کنند. انتخابگرهای کلاس شبه :user-valid و :user-invalid با ارائه بازخورد در مورد اشتباهات تنها پس از تغییر ورودی توسط کاربر به بهبود تجربه کاربر از اعتبارسنجی ورودی کمک می کنند. با این انتخابگرهای جدید، دیگر نیازی به نوشتن کد حالتی برای پیگیری تغییرات ورودی کاربر نیست.

انتخابگرهای شبه کلاس تعامل کاربر

انتخابگرهای :user-valid و :user-invalid شبه کلاس مشابه کلاس های شبه :valid و :invalid موجود هستند. هر دو با یک کنترل فرم مطابقت دارند که آیا مقدار فعلی آن محدودیت‌های اعتبارسنجی آن را برآورده می‌کند یا خیر. با این حال، مزیت شبه کلاس‌های جدید :user-valid و :user-invalid این است که تنها پس از اینکه کاربر به طور قابل توجهی با ورودی تعامل داشته باشد، با یک کنترل فرم مطابقت دارند.

یک کنترل فرم که مورد نیاز و خالی است مطابق با :invalid خواهد بود حتی اگر کاربر تعامل با صفحه را شروع نکرده باشد. با این حال، همان کنترل فرم با :user-invalid مطابقت نخواهد داشت تا زمانی که کاربر ورودی را تغییر داده و آن را در حالت نامعتبر قرار دهد.

از شبه کلاس های :user-valid و :user-invalid استفاده کنید

همانطور که در مثال های زیر نشان داده شده است، از این شبه کلاس ها برای استایل دادن به کنترل های ورودی، انتخاب و ناحیه متنی استفاده کنید:

input:user-valid,
select:user-valid,
textarea:user-valid {
  border-color: green;
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: red;
}
<input required="required" />

<select required="required">
  <option value="">Choose an option</option>
  <option value="1">One</option>
</select>

<textarea required="required"></textarea>

تصویری که 3 اسکرین شات را در کنار هم برای مقایسه ترکیب می کند. هر اسکرین شات یک فرم وب با همان ورودی، انتخاب و کنترل های ناحیه متنی را نشان می دهد. اسکرین شات اول فرم را در حالت اولیه قبل از هر ورودی کاربر نشان می دهد. مرزهای کنترل خاکستری هستند و متن راهنمای زیر توضیح می دهد که هر کنترل در حال حاضر با انتخابگر شبه کلاس :invalid مطابقت دارد. اسکرین شات دوم پس از اینکه کاربر ورودی برای هر کنترل ارائه کرد، همان فرم را نشان می دهد. مرزهای کنترل سبز هستند و متن راهنمای زیر توضیح می دهد که هر کنترل در حال حاضر با هر دو انتخابگر کلاس شبه :valid و :user-valid مطابقت دارد. سومین و آخرین اسکرین شات همان فرم را بعد از اینکه کاربر تمام ورودی خود را حذف کرد نشان می دهد. مرزهای کنترل قرمز هستند و متن راهنمای زیر توضیح می دهد که هر کنترل در حال حاضر با هر دو انتخابگر کلاس شبه :invalid و :user-invalid مطابقت دارد.

انتخابگرها بر اساس ترکیبی از تعاملات کاربر و محدودیت‌های اعتبارسنجی مطابقت دارند. با دمو زیر تعامل کنید تا آنها را در عمل ببینید:

تجربه کاربری بهتر با کد کمتر

بدون این کلاس های کاذب، دستیابی به تجربه کاربری فعال شده توسط :user-valid و :user-invalid نیاز به نوشتن کد حالت اضافی دارد. این کد برای پیگیری مقدار اولیه، وضعیت تمرکز فعلی ورودی، میزان تغییرات کاربر در مقدار، اجرای یک بررسی اعتبار اضافی، و در نهایت اضافه کردن یک کلاس برای انتخاب برای استایل مورد نیاز بود. اکنون می توانید به مرورگر اعتماد کنید تا همه این موارد را به طور خودکار انجام دهد.

منابع بیشتر

عکس کاور از بهزاد غفاریان در Unsplash .