JavaScript validointi API

rajoitettuTarkistus DOM-metodi

ominaisuus kuvaus
tarkistaTunnisteellisuus jos input-elementissä on kelvollinen tieto, palauta true.
setCustomValidity() aseta input-elementin validationMessage ominaisuus.

jos syötteen kentässä on epäkelpo tieto, näytä viesti:

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>

Kokeile itse

rajoitustarkistus DOM ominaisuudet

ominaisuus kuvaus
validity sisältää boolean-ominaisuudet, jotka liittyvät input-elementin kelvollisuuteen.
validationMessage sisältää viestin, jonka selaimen näyttää, kun kelvollisuus on false.
willValidate merkitsee, että input-elementtiä tarkistetaan.

kelvollisuusominaisuudet

input-elementin kelvollisuusominaisuuksiin kuuluu monia tietojen kelvollisuuteen liittyviä ominaisuuksia:

ominaisuus kuvaus
customError jos on asetettu mukautettu virheilmoitus, aseta arvoksi true.
patternMismatch jos elementin arvo ei vastaa sen pattern-ominaisuutta, aseta arvoksi true.
rangeOverflow jos elementin arvo on suurempi kuin sen max-ominaisuus, aseta arvoksi true.
rangeUnderflow jos elementin arvo on pienempi kuin sen min-ominaisuus, aseta arvoksi true.
stepMismatch jos elementin arvo ei ole kelvollinen sen step-ominaisuudelle, aseta arvoksi true.
tooLong jos elementin arvo ylittää sen maxLength-ominaisuuden, aseta arvoksi true.
typeMismatch jos elementin arvo ei ole kelvollinen sen type-ominaisuukselle, aseta arvoksi true.
valueMissing jos elementti (jolla on required-ominaisuus) ei ole arvoa, aseta arvoksi true.
valid jos elementin arvo on kelvollinen, aseta arvoksi true.

esimerkki

jos syötteen arvo on suurempi kuin 100 (input-elementin max ominaisuus），näytetään viesti:

rangeOverflow ominaisuus

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

Kokeile itse

Jos syötteen kentän numero on alle 100 (input-elementin min ominaisuus），näytetään viesti:

rangeUnderflow-ominaisuus

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

Kokeile itse