API Validasi JavaScript

Metode dan properti DOM validasi pengaturan.

Metode

Metode Deskripsi
checkValidity() Kembalikan true jika elemen input berisi data yang sah.
setCustomValidity() Setel properti validationMessage elemen input.

Properti

Properti Deskripsi
validity Berisi properti boolean yang berhubungan dengan validitas elemen input.
validationMessage Berisi pesan yang akan ditampilkan browser saat validitasnya salah.
willValidate Menunjukkan apakah elemen input akan divalidasi.

Contoh - metode checkValidity()

Jika field input berisi data yang tidak sah, tampilkan pesan:

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  }
}
</script>

Coba Sendiri

Properti kepatuhan

Elemen inputProperti kepatuhanMengandung banyak properti yang berhubungan dengan kepatuhan data:

Properti Deskripsi
customError Jika diatur pesan kepatuhan kustom, atur ke true.
patternMismatch Jika nilai elemen tidak cocok dengan properti pattern-nya, atur ke true.
rangeOverflow Jika nilai elemen melebihi properti max-nya, atur ke true.
rangeUnderflow Jika nilai elemen kurang dari properti min-nya, atur ke true.
stepMismatch Jika nilai elemen tidak valid menurut properti step-nya, atur ke true.
tooLong Jika nilai elemen melebihi properti maxLength-nya, atur ke true.
typeMismatch Jika nilai elemen tidak valid menurut properti type-nya, atur ke true.
valueMissing Jika elemen (dengan properti required) tidak memiliki nilai, atur ke true.
valid Jika nilai elemen valid, atur ke true.

Contoh

properti rangeOverflow

Jika angka di field input melebihi 100 (input max Jika properti), tampilkan pesan:

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "Nilai OK";
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Nilai terlalu besar";
  }
}
</script>

Coba Sendiri

properti rangeUnderflow

Jika angka di field input melebihi 100 (input max Jika properti), tampilkan pesan:

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = = "Nilai OK";
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Nilai terlalu kecil";
  }
}
</script>

Coba Sendiri