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

ادامه مطلب

 

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

<input type="number" />

مقدار عنصر input باید از نوع عدد باشد تا در وضعیت valid قرار بگیرد.

<input type="email" />

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

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

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

input[type="number"]:valid {
  background-color: green;
}                   

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

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

در این دمو همچنین از انتخابگر invalid: برای تعیین وضعیت نامعتبر عناصر فرم استفاده شده است.

 

 

 

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

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