Method DOM Validasi Batasan
| Properti | Deskripsi |
|---|---|
| checkValidity() | Mengembalikan nilai true jika elemen masukan berisi data yang valid. |
| setCustomValidity() | Mengatur properti validationMessage dari elemen masukan. |
Jika kolom input berisi data yang tidak valid, tampilkan pesan:
<!DOCTYPE html> <html> <body> <p>Masukkan angka dan klik OK:</p> <input id="id1" type="number" min="100" max="300" required> <button onclick="myFunction()">OK</button> <p> Jika angkanya kurang dari 100 atau lebih dari 300, pesan kesalahan akan ditampilkan. </p> <p id="demo"></p> <script> function myFunction() { var inpObj = document.getElementById("id1"); if (!inpObj.checkValidity()) { document.getElementById("demo").innerHTML = inpObj.validationMessage; } else { document.getElementById("demo").innerHTML = "Input OK"; } } </script> </body> </html>
Properti DOM Validasi Batasan
| Properti | Deskripsi |
|---|---|
| validity | Berisi properti boolean yang terkait dengan validitas elemen masukan. |
| validationMessage | Berisi pesan yang akan ditampilkan browser jika validitasnya salah. |
| willValidate | Menunjukkan apakah elemen input akan divalidasi. |
Properti Validitas
Properti validitas elemen input berisi sejumlah properti yang terkait dengan validitas data:
| Properti | Deskripsi |
|---|---|
| customError | Setel ke true, jika pesan validitas kustom disetel. |
| patternMismatch | Setel ke true, jika nilai elemen tidak cocok dengan atribut polanya. |
| rangeOverflow | Setel ke true, jika nilai elemen lebih besar dari atribut maks. |
| rangeUnderflow | Setel ke true, jika nilai elemen kurang dari atribut minnya. |
| stepMismatch | Setel ke true, jika nilai elemen tidak valid per atribut langkahnya. |
| tooLong | Setel ke true, jika nilai elemen melebihi atribut maxLength-nya. |
| typeMismatch | Setel ke true, jika nilai elemen tidak valid per atribut tipenya. |
| valueMissing | Setel ke true, jika elemen (dengan atribut wajib) tidak memiliki nilai. |
| valid | Setel ke true, jika nilai elemen valid. |
Contoh
Jika angka di kolom input lebih besar dari 100 (atribut max input), tampilkan pesan:
Properti rangeOverflow
<!DOCTYPE html>
<html>
<body>
<p> Masukkan angka dan klik OK: </p>
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p> Jika angkanya lebih dari 100 (atribut maks dari input), pesan kesalahan akan ditampilkan. </p>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeOverflow) {
txt = "Value too large";
} else {
txt = "Input OK";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Jika angka dalam kolom input kurang dari 100 (atribut min input), tampilkan pesan:
<!DOCTYPE html>
<html>
<body>
<p> Masukkan angka dan klik OK: </p>
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p> Jika angkanya kurang dari 100 (atribut min input), pesan kesalahan akan ditampilkan. </p>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeUnderflow) {
txt = "Value too small";
} else {
txt = "Input OK";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
