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 >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 | 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 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 >
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 >