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 بشه این کار رو انجام داد، ولی امتحان کردم نشد.

  2. جناب سیدی عزیز،
    میشه لطفا تفاوت سودوکلاس های :valid و in-range را بفرمایید؟ شما از هر دو برای یک هدف استفاده کردید!

    1. انتخابگر in-range فقط برای مواردی مثل input از نوع number هستش، ولی اعتبارسنجی هر نوع input رو میشه با valid چک کرد. میشه گفت اولی زیرمجموعه ای از دومی هستش.

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

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