valid:

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: برای تعیین وضعیت نامعتبر عناصر فرم استفاده شده است.

 

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

 

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

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

5 دیدگاه برای “valid:

  1. اگه بخوایم وقتی مقدار invalid شد، یه پیام زیر ورودی بنویسه، باید چه جوری عمل کنیم؟
    من فکر کردم با ::after بشه این کار رو انجام داد، ولی امتحان کردم نشد.

سوال داری؟ برو به پنل پرسش و پاسخ

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