انتخابگرهای CSS :valid

در دنیای طراحی وب، یکی از ویژگی‌های بسیار مهم CSS، انتخابگرها هستند که به ما امکان می‌دهند استایل‌های خاصی را به عناصر خاصی از صفحه اعمال کنیم. یکی از انتخابگرهایی که شاید کمتر شناخته شده باشد، انتخابگر :valid است. این انتخابگر به ما اجازه می‌دهد که عناصر فرمی را که داده‌های معتبری دریافت کرده‌اند، سبک‌دهی کنیم. در ادامه به بررسی این انتخابگر خواهیم پرداخت و کاربردهای آن را مورد بررسی قرار خواهیم داد.

انتخابگر :valid مخصوص عناصر فرم است و به شما کمک می‌کند تا تعیین کنید که آیا داده‌های وارد شده در فرم با قواعد اعتبارسنجی‌ای که تعیین کرده‌اید، مطابقت دارند یا نه. این یعنی زمانی که داده ورودی کاربر مطابق با قواعد تخمین شده باشد، می‌توانید ظاهر آن ورودی را تغییر دهید. به عنوان مثال، می‌توانید رنگ نوار ورودی‌ها را در صورت صحیح بودن تغییر دهید تا به کاربر نشان دهید که داده‌اش صحیح است.

این انتخابگر، همراه با دیگر انتخابگرهای فرم مانند :invalid، :required و :optional به شما امکان می‌دهد کنترل کاملی بر وضعیت‌های مختلف فرم داشته باشید. استفاده از این انتخابگرها نه تنها به بهبود تجربه کاربری کمک می‌کند بلکه موجب افزایش کارایی فرم‌های شما در برنامه‌های کاربردیتان می‌شود.

در نتیجه، استفاده از انتخابگر :valid در پروژه‌های توسعه وب می‌تواند به شما کمک کند تا فرم‌هایی کاربرپسندتر و زیباتر ایجاد کنید و کاربرانتان را به راحتی در فرآیند ورود اطلاعات راهنمایی کنید. برای اینکه بیشتر با این انتخابگر آشنا شوید و آن را در عمل ببینید، در ادامه مثالی از کاربرد آن آورده شده است.

<style>
    input:valid {
        border-color: limegreen;
        background-color: #eaffea;
    }
</style>
<form>
    <input type="text" pattern="[a-zA-Z0-9]+" required>
    <input type="email" required>
</form>

در این مثال، یک <style> تعریف شده است که برای انتخابگر input:valid دو سبک اعمال کرده است: تغییر رنگ مرزی به سبز و تغییر پس‌زمینه به سبز کمرنگ.

این به این معنی است که هر زمان داده ورودی در فیلدهای متنی و ایمیل فرم معتبر باشد، این سبک‌ها اعمال خواهند شد.

در HTML نمونه، یک فرم با دو ورودی شامل یک فیلد متنی و یک فیلد ایمیل تعریف شده است که هر دو دارای اعتبارسنجی‌های خاصی هستند.

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

در نهایت با وارد کردن داده صحیح در هر یک از فیلدها، تغییر ظاهری که در CSS تعریف شده به خوبی اعمال خواهد شد.