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