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 پشتیبانی می شود.
اگه بخوایم وقتی مقدار invalid شد، یه پیام زیر ورودی بنویسه، باید چه جوری عمل کنیم؟
من فکر کردم با ::after بشه این کار رو انجام داد، ولی امتحان کردم نشد.
یه کارایی مثل این میشه کرد:
https://jsbin.com/yazesex/edit?html,css,output
چقدر ساده و زیبا انجامش دادید!!
جناب سیدی عزیز،
میشه لطفا تفاوت سودوکلاس های :valid و in-range را بفرمایید؟ شما از هر دو برای یک هدف استفاده کردید!
انتخابگر in-range فقط برای مواردی مثل input از نوع number هستش، ولی اعتبارسنجی هر نوع input رو میشه با valid چک کرد. میشه گفت اولی زیرمجموعه ای از دومی هستش.