الفرق بين المراجعتين لصفحة: «CSS/:invalid»

المراجعة الحالية بتاريخ 10:50، 21 أكتوبر 2018

الصنف الزائف ‎:invalid في CSS (أي pseudo-class) يُمثِّل أيّة عناصر <input> أو <form> التي فشل التحقق من صحة محتوياتها.

input:invalid {
  background-color: pink;
}

هذا المُحدِّد مفيد للإشارة إلى الحقول التي فيها أخطاء كي ينتبه المستخدم إليها.

لاحظ أنَّه إذا كان أحد عناصر مجموعة أزرار الانتقاء (أي عناصر radio التي لها نفس القيمة للخاصية name) قد ضُبِطَت عليه الخاصية required، فالصنف الزائف ‎:invalid سيُطبَّق على جميع العناصر إذا لم يختار المستخدم أحدها.

الشكل العام لهذا المحدد:

:invalid

أمثلة

هذا المثال يُمثِّل نموذجًا تُشير ألوانه إلى حالة التحقق من صحة محتوياته، إذ إنَّ اللون الأخضر يعني أنَّ المدخلات سليمة، واللون الأحمر يعني أنها عكس ذلك:

<form>
  <label for="url_input">أدخل الرابط:</label>
  <input type="url" id="url_input">
  <br>
  <label for="email_input">أدخل عنوان البريد الإلكتروني:</label>
  <input type="email" id="email_input" required>
</form>

شيفرة CSS:

input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}
  
input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #C00000;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي (<input>)	10.0	4.0	10	10.0	5.0
<form>	مدعومة	13	غير مدعومة	مدعومة	؟

انظر أيضًا

صفحة الصنف الزائف required: الذي يُمثِّل أيّة عناصر <input> أو <select> أو <textarea> التي ضُبِطَت الخاصية required عليها.
صفحة الصنف الزائف optional: الذي يُمثِّل أيّة عناصر <input> أو <select> أو <textarea> التي لم تُضبَط الخاصية required عليها.
صفحة الصنف الزائف valid: الذي يُمثِّل أيّة عناصر <input> أو <form> التي نجح المتصفح بالتحقق من صحة محتوياتها.

مصادر ومواصفات

معيار HTML Living Standard.
مواصفة HTML5.
مسودة Selectors Level 4.

@@ سطر 16: / سطر 16: @@
 هذا المثال يُمثِّل نموذجًا تُشير ألوانه إلى حالة التحقق من صحة محتوياته، إذ إنَّ اللون الأخضر يعني أنَّ المدخلات سليمة، واللون الأحمر يعني أنها عكس ذلك:<syntaxhighlight lang="html">
 <form>
-   <label for="url_input">Enter a URL:</label>
+   <label for="url_input">أدخل الرابط:</label>
    <input type="url" id="url_input">
    <br>
-   <label for="email_input">Enter an email address:</label>
+   <label for="email_input">أدخل عنوان البريد الإلكتروني:</label>
    <input type="email" id="email_input" required>
 </form>
@@ سطر 72: / سطر 72: @@
 |؟
 |}
+==انظر أيضًا==
+* صفحة الصنف الزائف <code>[[CSS/:required|required:]]</code> الذي يُمثِّل أيّة عناصر <code>[[HTML/input|<input>]]</code> أو <code>[[HTML/select|<select>]]</code> أو <code>[[HTML/textarea|<textarea>]]</code> التي ضُبِطَت الخاصية <code>required</code> عليها.
+* صفحة الصنف الزائف <code>[[CSS/:optional|optional:]]</code> الذي يُمثِّل أيّة عناصر <code>[[HTML/input|<input>]]</code> أو <code>[[HTML/select|<select>]]</code> أو <code>[[HTML/textarea|<textarea>]]</code> التي لم تُضبَط الخاصية <code>required</code> عليها.
+* صفحة الصنف الزائف <code>[[CSS/:valid|valid:]]</code> الذي يُمثِّل أيّة عناصر <code>[[HTML/input|<input>]]</code> أو <code>[[HTML/form|<form>]]</code> التي نجح المتصفح بالتحقق من صحة محتوياتها.
 ==مصادر ومواصفات==
 *معيار [https://html.spec.whatwg.org/multipage/#selector-invalid HTML Living Standard].