API Validasi JavaScript

Metode Verifikasi Kepemimpinan DOM

Properti Deskripsi
checkValidity() Jika elemen input mengandung data yang valid, kembalikan true.
setCustomValidity() Atur properti validationMessage elemen input.

Jika bidang input mengandung data yang tidak valid, tampilkan pesan:

Metode checkValidity()

<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 DOM verifikasi konstrain

Properti Deskripsi
validity Mengandung properti boolean yang berhubungan dengan keberalihan elemen input.
validationMessage Mengandung pesan yang akan ditampilkan browser saat keberalihan false.
willValidate Menunjukkan apakah validasi elemen input akan dilakukan.

Properti keberalihan

Properti keberalihan elemen input mengandung banyak properti yang berhubungan dengan keberalihan data:

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

Contoh

Jika angka yang diinput di bidang input melebihi 100 (elemen max Jika properti (properti), tampilkan pesan:

Properti rangeOverflow

<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

Jika angka di bidang input kurang dari 100 (elemen input) min Jika properti (properti), tampilkan pesan:

Properti rangeUnderflow

<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