JavaScript-lomakkeen validointi

Sisällysluettelo

Rajoituksen validointi DOM-menetelmät

checkValidity(): Palauttaa tosi, jos syöteelementti sisältää kelvollisia tietoja.
setCustomValidity(): Asettaa syöttöelementin validationMessage-ominaisuuden.

Jos syöttökenttä sisältää virheellisiä tietoja, näytä viesti:

CheckValidity() -menetelmä

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

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

<p>If the number is less than 100 or greater than 300, an error message will be displayed.</p>

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

<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  } else {
    document.getElementById("demo").innerHTML = "Input OK";
  } 
} 
</script>

</body>
</html>

Rajoituksen validointi DOM-ominaisuudet

validity: Sisältää syöttöelementin kelpoisuuteen liittyviä boolean-ominaisuuksia.
validationMessage: Sisältää viestin, jonka selain näyttää, kun kelvollisuus on epätosi.
willValidate: Osoittaa, tarkistetaanko syöteelementti.

Voimassaoloominaisuudet

Syöttöelementin validity-ominaisuus sisältää numeron tietojen oikeellisuuteen liittyvistä ominaisuuksista:

customError: Aseta arvoon tosi, jos mukautettu kelvollisuusviesti on asetettu.
patternMismatch: Aseta arvoon tosi, jos elementin arvo ei vastaa sen kuvioattribuuttia.
rangeOverflow: Aseta arvoon tosi, jos elementin arvo on suurempi kuin sen max-attribuutti.
rangeUnderflow: Aseta arvoon tosi, jos elementin arvo on pienempi kuin sen min-attribuutti.
stepMismatch: Aseta arvoon tosi, jos elementin arvo on virheellinen sen step-attribuutin mukaan.
tooLong: Aseta arvoon tosi, jos elementin arvo ylittää sen maxLength-attribuutin.
typeMismatch: Aseta arvoon tosi, jos elementin arvo on virheellinen sen type-attribuutin mukaan.
valueMissing: Aseta arvoon tosi, jos elementillä (jolla on pakollinen attribuutti) ei ole arvoa.
valid: Aseta arvoksi tosi, jos elementin arvo on kelvollinen.

Esimerkkejä

Jos syöttökentän luku on suurempi kuin 100 (syötteen max attribuutti), näytä viesti:

RangeOverflow-ominaisuus

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

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

<script>
function myFunction() {
  let text = "Value OK";
    if (document.getElementById("id1").validity.rangeOverflow) {
      text = "Value too large";
    }
}
</script>

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

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

<p>If the number is greater than 100 (the input's max attribute), an error message will be displayed.</p>

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

<script>
function myFunction() {
  let text;
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Value too large";
  } else {
    text = "Input OK";
  } 
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

Jos syöttökentän luku on pienempi kuin 100 (syötteen min-attribuutti), näytä viesti:

AlueUnderflow-ominaisuus

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

<p id="demo"></p>
<script>
function myFunction() {
  let text = "Value OK";
    if (document.getElementById("id1").validity.rangeUnderflow) {
      text = "Value too small";
    }
}
</script>

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

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

<p>If the number is less than 100 (the input's min attribute), an error message will be displayed.</p>

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

<script>
function myFunction() {
  let text;
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Value too small";
  } else {
    text = "Input OK";
  } 
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>