رویداد oninvalid
تعریف و استفاده
وقتی عناصر <input> قابل ارسال نامعتبر باشند، رویداد oninvalid رخ میدهد.
مثال، اگر ویژگی required تنظیم شده باشد و فیلد خالی باشد، فیلد ورودی نامعتبر است (ویژگی required مشخص میکند که فیلد ورودی باید قبل از ارسال فرم پر شود).
مثال
مثال 1
اگر فیلد ورودی معتبر نباشد، یک پیام هشدار نمایش داده شود:
<input type="text" oninvalid="alert('You must fill out the form!');" required>
در پایین صفحه مثالهای بیشتری از TIY وجود دارد.
منطق
در HTML:
<عنصر oninvalid="myScript">
در جاوااسکریپت:
آبجکت.oninvalid = function(){myScript};
در جاوااسکریپت از روش addEventListener() استفاده کنید:
آبجکت.addEventListener("invalid", myScript);
توضیحات:اینترنت اکسپلورر 8 و نسخههای پیشین از آن از روش addEventListener() پشتیبانی نمیکنند مетод addEventListener().
جزئیات فنی
| بالابردگی: | نپشتیبانیشده |
|---|---|
| قابل لغو: | پشتیبانی |
| نوع رویداد: | رویداد |
| برچسبهای HTML پشتیبانیشده: | <input> |
| نسخه DOM: | رویدادهای سطح 3 |
پشتیبانی مرورگر
اعداد در جدول نشاندهنده نسخه اولین مرورگر هستند که از این رویداد کامل پشتیبانی میکند.
| رویداد | کروم | IE | افراط | سافاری | آپرا |
|---|---|---|---|---|---|
| oninvalid | پشتیبانی | 10.0 | پشتیبانی | پشتیبانی | پشتیبانی |
مثالهای بیشتر
مثال 2
اگر فیلد ورودی شامل کمتر از 6 حرف باشد، یک پیام هشدار نمایش داده شود:
Name: <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 باشد، یک پیام هشدار نمایش داده شود:
Number: <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>
