oninvalid ਈਵੈਂਟ
ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ
ਜਦੋਂ ਸੰਮਿਲਤ ਕਰਨ ਯੋਗ <input> ਐਲੀਮੈਂਟ ਬੇਕਾਰ ਹੋਵੇ ਤਾਂ oninvalid ਈਵੈਂਟ ਹੁੰਦਾ ਹੈ。
ਜੇਕਰ required ਪ੍ਰਤੀਯੋਗਿਤਾ ਸੈੱਟ ਕੀਤੀ ਹੈ ਅਤੇ ਫੀਲਡ ਖਾਲੀ ਹੈ, ਤਾਂ ਇਨਪੁਟ ਫੀਲਡ ਬੇਕਾਰ ਹੋ ਜਾਵੇਗਾ (required ਪ੍ਰਤੀਯੋਗਿਤਾ ਇਨਪੁਟ ਫੀਲਡ ਨੂੰ ਫਾਰਮ ਭੇਜਣ ਤੋਂ ਪਹਿਲਾਂ ਭਰਨਾ ਚਾਹੀਦਾ ਹੈ)。
Instance
Example 1
If the input field is invalid, then show some text:
<input type="text" oninvalid="alert('You must fill out the form!');" required>
More TIY examples are at the bottom of the page.
Syntax
In HTML:
<element oninvalid="myScript">
In JavaScript:
object.oninvalid = function(){myScript};
In JavaScript, use the addEventListener() method:
object.addEventListener("invalid", myScript);
Note:Internet Explorer 8 or earlier versions do not support addEventListener() method.
Technical details
| Bubble: | Not supported |
|---|---|
| Cancelable: | Support |
| Event type: | Event |
| Supported HTML tags: | <input> |
| DOM version: | Level 3 Events |
Browser support
The numbers in the table indicate the first browser version that fully supports the event.
| Event | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| oninvalid | Support | 10.0 | Support | Support | Support |
More examples
Example 2
If the input field contains fewer than 6 characters, then show some text:
Name: <input type="text" id="myInput" name="fname" pattern=".{6,}" required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("Must contain 6 or more characters");
}
</script>
Example 3
If the input field contains a number less than 2 or greater than 5, then show some text:
Number: <input type="number" id="myInput" name="quantity" min="2" max="5" required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("You must pick a number between 2 and 5. You chose: " + this.value);
}
</script>
