HTML-lomakkeen validointi voidaan tehdä JavaScriptillä.
Jos lomakekenttä (fname) on tyhjä, tämä funktio hälyttää viestin ja palauttaa sen epätosi lomakkeen lähettämisen estämiseksi:
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}Funktio voidaan kutsua, kun lomake lähetetään:
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<h2>JavaScript Validation</h2>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
JavaScriptiä käytetään usein numeerisen syötteen vahvistamiseen:
Syötä numero väliltä 1-10
<script> function myFunction() { var x; var text = "Input OK"; //Get the value of input field with id="numb" x = document.getElementById("numb").value; // If x is Not a Number, or x is less than one, or x is grather than 10 then if (isNaN(x) || x < 1 || x > 10) { text = "Not valid"; } document.getElementById("demo").innerHTML = text; }Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Validation</h2>
<p>Please input a number between 1 and 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
// Get the value of the input field with id="numb"
let x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
let text;
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Selain voi suorittaa HTML-lomakkeen vahvistuksen automaattisesti:
Jos lomakekenttä (fname) on tyhjä, pakollinen-attribuutti estää tämän lomakkeen lähetetty:
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Validation</h2>
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
<p>If you click submit, without filling out the text field,
your browser will display an error message.</p>
</body>
</html>
Automaattinen HTML-lomakkeen tarkistus ei toimi Internet Explorer 9:ssä tai aiemmassa versiossa.
Tietojen validointi on prosessi, jolla varmistetaan, että käyttäjän syöte on puhdasta, oikeaa ja hyödyllistä.
Tyypillisiä validointitehtäviä ovat:
onko käyttäjä täyttänyt kaikki vaaditut kentät?
onko käyttäjä syöttänyt kelvollisen päivämäärän?
onko käyttäjä kirjoittanut tekstiä numerokenttään?
Useimmiten tietojen validoinnin tarkoituksena on varmistaa, että käyttäjä syöttää tietoja oikein.
Validointi voidaan määrittää monilla eri menetelmillä ja ottaa käyttöön monissa eri tavoilla.
Palvelinpuolen vahvistuksen suorittaa verkkopalvelin sen jälkeen, kun syöte on lähetetty palvelin.
Asiakaspuolen vahvistus suorittaa verkkoselain, ennen kuin syöte lähetetään verkkopalvelimelle.
HTML5 esitteli uuden HTML-tarkistuskonseptin nimeltä rajoitus vahvistus.
HTML-rajoitteen validointi perustuu:
Rajoituksen vahvistus HTML Syöteattribuutit
Rajoituksen vahvistus CSS-pseudovalitsijat
Rajoituksen vahvistus DOM:n ominaisuudet ja menetelmät
Määrittää, että syöttöelementti on poistettava käytöstä
Määrittää syöteelementin enimmäisarvon
Määrittää syöteelementin vähimmäisarvon
Määrittää syöteelementin arvokuvion
Määrittää, että syöttökenttä vaatii elementin
Määrittää syöttöelementin tyypin
Täydellinen luettelo on kohdassa HTML Syöttöattribuutit.
Valitsee syöteelementit, joiden attribuutti "disabled" on määritetty
Valitsee syöteelementit, joilla on virheellisiä arvoja
Valitsee syöteelementit, joille ei ole määritetty "pakollista" attribuuttia
Valitsee syöteelementit, joissa on määritetty "pakollinen" attribuutti
Valitsee syöteelementit kelvollisilla arvoilla
Täydellinen luettelo löytyy CSS:stä Pseudo-luokat.