حدث oninvalid

مثل أحداث DOM مثل Event

التعريف والاستخدام

يحدث حدث oninvalid عند عدم صحة عنصر <input> القابل للتقديم.

على سبيل المثال، إذا تم تعيين خاصية required، وكان الحقل فارغًا، فإن حقل الإدخال غير صالح (تحدد خاصية required أن يكون حقل الإدخال ملزمًا قبل تقديم استمارة)

مثال

مثال 1

إذا كان حقل الإدخال غير صالح، فأظهر نصًا

<input type="text" oninvalid="alert('يجب ملء النموذج!');" required>

تجربة شخصية

هناك أمثلة TIY أكثر في نهاية الصفحة.

النحو

في HTML:

<العنصر oninvalid="myScript">

تجربة شخصية

في JavaScript:

الجسم.oninvalid = function(){myScript};

تجربة شخصية

في JavaScript، استخدم طريقة addEventListener():

الجسم.addEventListener("invalid", myScript);

تجربة شخصية

ملاحظة:Internet Explorer 8 أو الأحدث لا يدعم طريقة addEventListener().

تفاصيل التقنية

تدفق الحدث: غير مدعوم
قابل للإلغاء: دعم
نوع الحدث: حدث
العلامات HTML المدعومة: <input>
إصدار DOM: أحداث المستوى 3

دعم المتصفح

الرقم في الجدول يوضح إصدار المتصفح الأول الذي يدعم هذا الحدث بالكامل.

الحدث Chrome IE Firefox Safari Opera
oninvalid دعم 10.0 دعم دعم دعم

مزيد من الأمثلة

مثال 2

إذا كان حقل الإدخال يحتوي على أقل من 6 حرف، فأظهر نصًا

الاسم: <input type="text" id="myInput" name="fname" pattern=".{6,}" required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
  alert("يجب أن يحتوي على 6 أو أكثر من الأحرف");
}
</script>

تجربة شخصية

مثال 3

إذا كان حقل الإدخال يحتوي على رقم أقل من 2 أو أكبر من 5، فأظهر نصًا

عدد: <input type="number" id="myInput" name="quantity" min="2" max="5" required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
  alert("يجب أن تختار عدد بين 2 و5. اخترت: " + this.value);
}
</script>

تجربة شخصية

مثل الصفحات ذات الصلة

مثل دروس JavaScript: مثل JavaScript

مثل أحداث DOM مثل Event