invalid:

invalid یک pseudo-class می باشد که برای انتخاب و استایل دهی به عنصر input در یک فرم, زمانی که آن عنصر با توجه به نوع مشخص شده (type) مقدار نادرست گرفته باشد.

عنصر زیر را در نظر بگیرید:


<input type="number" />

مقدار عنصر input باید از نوع عدد باشد پس اگر آن را با حروف الفبا پر کنیم در وضعیت invalid قرار می گیرد.


<input type="email" />

و با توجه به نوع عنصر بالا اگر مقدار وارد شده ساختاری شبیه به ایمیل نداشته باشد, مقدار عنصر نادرست است و عنصر در وضعیت invalid قرار می گیرد.

در برخی مرورگرها این انتخابگر شامل خود عنصر form و fieldset زمانی که عناصر داخلی آنها مقدار نادرست داشته باشند نیز می شود.

در زیر مثال هایی برای نحوه استفاده از این انتخابگر آمده است:


input:invalid:focus {
  outline: 0;
  border: none;
  box-shadow: 0 0 3px 6px rgba(255, 0, 0, 0.3);
}

input[type="number"]:invalid {
  background-color: tomato;
}                   

input:invalid {
  box-shadow: 0 0 3px 5px rgba(255, 0, 0, .2);
}

در دموی زیر زمانی که عناصر فرم مقادیر نادرست دریافت کنند پس زمینه آنها تبدیل به قرمز می شود و اگر در این حالت انتخاب شوند یک سایه قرمز هم در اطرافشان رسم می شود.

 

See the Pen :invalid by Mojtaba Seyedi (@seyedi) on CodePen.

 

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

invalid: در مرورگرهای کروم +10 , فایرفاکس +4 , سافاری +5, اپرا +10 و اینترنت اکسپلورر +10 و سیستم عامل iOS پشتیبانی می شود.

سوالت رو توی پنل بحث و گفتگو مطرح کن.

4 دیدگاه برای “invalid:

  1. سلام

    تفاوتش با in-range چیه ؟میشه گفت مثل هم اند؟ مثلا input که تیپش رنجه هم با شبه کلاس in range و هم با invalid بنویسم که معناشون یکی میشه

    1. سلام، in-range که صحیح بودن رو بررسی میکنه پس قابل قیاس نیست با این دیگه درسته؟ یا من اشتباه میکنم؟

      اما اگر در مورد out-of-range صحبت کنیم، میتونن در نقاطی با هم هم معنی باشند. نکته اینجاست که شما باید استفاده از هر کدوم یک
      پیام قابل درکی به کاربر بدید

      به عنوان نمونه عرض کنم: مثلا وقتی میگی invalid کاربر فقط میفهمه که خطا داره دیگه نمیدونه خطاش چیه؟ شما میتونید با out-of-range دقیقتر کاربر رو راهنمایی کنید.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *