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 پشتیبانی می شود.