Kendala Metode DOM Validasi
| Milik | Deskripsi |
|---|---|
| checkValidity() | Mengembalikan true jika elemen input berisi data yang valid. |
| setCustomValidity() | Mengatur properti validationMessage dari elemen input. |
Jika sebuah field input berisi data yang tidak valid, menampilkan pesan:
The checkValidity () Metode
<input id="id1" type="number" min="100" max="300">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj =
document.getElementById("id1");
if (inpObj.checkValidity()
== false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
}
}
</script> Cobalah sendiri " Kendala Validasi DOM Properti
| Milik | Deskripsi |
|---|---|
| validity | Berisi properti boolean yang terkait dengan keabsahan elemen input. |
| validationMessage | Berisi pesan browser akan ditampilkan ketika validitas adalah palsu. |
| willValidate | Menunjukkan jika elemen input akan divalidasi. |
validitas Properti
Properti validitas elemen masukan berisi sejumlah properti yang berkaitan dengan validitas data:
| Milik | Deskripsi |
|---|---|
| customError | Set true, jika pesan validitas khusus ditetapkan. |
| patternMismatch | Set true, jika nilai elemen tidak cocok atribut polanya. |
| rangeOverflow | Set true, jika nilai elemen lebih besar daripada atribut max-nya. |
| rangeUnderflow | Set true, jika nilai elemen adalah kurang dari atribut min-nya. |
| stepMismatch | Set true, jika nilai elemen tidak valid per atribut langkah nya. |
| tooLong | Set true, jika nilai elemen melebihi atribut MAXLENGTH nya. |
| typeMismatch | Set true, jika nilai elemen tidak valid per atribut jenisnya. |
| valueMissing | Set true, jika elemen (dengan atribut wajib) tidak memiliki nilai. |
| valid | Set true, jika nilai elemen adalah valid. |
contoh
Jika jumlah dalam field input lebih besar dari 100 (input ini max atribut), menampilkan pesan:
The rangeOverflow Properti
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeOverflow) {
txt = "Value too large";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
Cobalah sendiri " Jika jumlah dalam field input kurang dari 100 (input ini min atribut), menampilkan pesan:
The rangeUnderflow Properti
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeUnderflow) {
txt = "Value too small";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
Cobalah sendiri "