Hatua ya oninvalid
Ufafanuzi na matumizi
Hatua ya oninvalid inayofanyika kamaanisha kimeingia kwa elementi ya <input> inayohatarishwa.
Kamaanisha, hadii lalisi ujumbe wa required, na eneo la ujumbe linakosema, ukurushwa wa eneo la ujumbe haujafaa (kufikia ujumbe wa required inayotukia kwamba eneo la ujumbe lazima lishikwe kufikia kuchukua fomu).
Example
Example 1
If the input field is invalid, display 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, display 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, display 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("Mtu wako lazima akachagua namba kati ya 2 na 5. Chaguo lako: " + this.value);
}
</script>
