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);
}

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

 

 

 

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

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