JavaScript Validation API

Cheklangan tekshirish (Constraint Validation) DOM metodlari

Metod	Tavsif
checkValidity()	Agar kiritish (input) elementi to'g'ri ma'lumotga ega bo'lsa, true qaytaradi.
setCustomValidity()	Kiritish elementining validationMessage xususiyatini o'rnatadi.

---

Agar kiritish maydonida noto'g'ri ma'lumot bo'lsa, xabar ko'rsatish:

checkValidity() metodi

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

---

Cheklangan tekshirish DOM xususiyatlari

Xususiyat	Tavsif
validity	Kiritish elementining haqiqiyligi (validity) bilan bog'liq mantiqiy xususiyatlarni o'z ichiga oladi.
validationMessage	Element noto'g'ri bo'lganda brauzer ko'rsatadigan xabarni o'z ichiga oladi.
willValidate	Kiritish elementi tekshirilishi yoki tekshirilmasligini ko'rsatadi.

---

Haqiqiylik (Validity) xususiyatlari

Kiritish elementining validity xususiyati ma'lumotlar haqiqiyligi bilan bog'liq bir qator xususiyatlarni o'z ichiga oladi:

Xususiyat	Tavsif
customError	Agar maxsus haqiqiylik xabari o'rnatilgan bo'lsa, true bo'ladi.
patternMismatch	Agar element qiymati uning pattern atributiga mos kelmasa, true bo'ladi.
rangeOverflow	Agar element qiymati uning max atributidan katta bo'lsa, true bo'ladi.
rangeUnderflow	Agar element qiymati uning min atributidan kichik bo'lsa, true bo'ladi.
stepMismatch	Agar element qiymati uning step atributiga ko'ra noto'g'ri bo'lsa, true bo'ladi.
tooLong	Agar element qiymati uning maxLength atributidan oshib ketgan bo'lsa, true bo'booladi.
typeMismatch	Agar element qiymati uning type atributiga ko'ra noto'g'ri bo'lsa, true bo'ladi.
valueMissing	Agar (required atributli) elementda qiymat bo'lmasa, true bo'ladi.
valid	Agar element qiymati haqiqiy (to'g'ri) bo'lsa, true bo'ladi.

---

Misollar

rangeOverflow xususiyati

Agar kiritish maydonidagi raqam 100 dan katta bo'lsa (inputning max atributi), xabar ko'rsatilsin:

<input id="id1" type="number" max="100" />
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
  function myFunction() {
    let text = "Qiymat to'g'ri"
    if (document.getElementById('id1').validity.rangeOverflow) {
      text = 'Qiymat juda katta'
    }
    document.getElementById('demo').innerHTML = text
  }
</script>

rangeUnderflow xususiyati

Agar kiritish maydonidagi raqam 100 dan kichik bo'lsa (inputning min atributi), xabar ko'rsatilsin:

<input id="id1" type="number" min="100" />
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
  function myFunction() {
    let text = "Qiymat to'g'ri"
    if (document.getElementById('id1').validity.rangeUnderflow) {
      text = 'Qiymat juda kichik'
    }
    document.getElementById('demo').innerHTML = text
  }
</script>