HTML-formularvalidering kan udføres med JavaScript.
Hvis et formularfelt (fname) er tomt, advarer denne funktion en besked og vender tilbage falsk, for at forhindre, at formularen indsendes:
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}Funktionen kan kaldes, når formularen indsendes:
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>Prøv det selv →
<!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>
JavaScript bruges ofte til at validere numerisk input:
Indtast et tal mellem 1 og 10
Prøv det selv →
<!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>
HTML-formularvalidering kan udføres automatisk af browseren:
Hvis et formularfelt (fname) er tomt, forhindrer den påkrævede-attribut, at denne formular bliver indsendt:
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>Prøv det selv →
<!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>
Automatisk HTML-formularvalidering virker ikke i Internet Explorer 9 eller tidligere.
Datavalidering er processen til at sikre, at brugerinput er rent, korrekt og nyttig.
Typiske valideringsopgaver er:
har brugeren udfyldt alle obligatoriske felter?
har brugeren indtastet en gyldig dato?
har brugeren indtastet tekst i et numerisk felt?
Oftest er formålet med datavalidering at sikre korrekt brugerinput.
Validering kan defineres ved mange forskellige metoder og implementeres i mange forskellige veje.
Serversidevalidering udføres af en webserver, efter at input er blevet sendt til server.
Validering på klientsiden udføres af en webbrowser, før input sendes til en webserver.
HTML5 introducerede et nyt HTML-valideringskoncept kaldet constraint validering.
HTML-begrænsningsvalidering er baseret på:
Begrænsningsvalidering HTML Inputattributter
Begrænsningsvalidering CSS Pseudo Selectors
Begrænsningsvalidering DOM-egenskaber og -metoder
Angiver, at input-elementet skal deaktiveres
Angiver den maksimale værdi af et inputelement
Angiver minimumværdien af et inputelement
Angiver værdimønsteret for et inputelement
Angiver, at inputfeltet kræver et element
Angiver typen af et inputelement
For en komplet liste, gå til HTML Input attributter.
Vælger inputelementer med attributten "disabled" angivet
Vælger inputelementer med ugyldige værdier
Vælger inputelementer uden angivet "påkrævet" attribut
Vælger inputelementer med den specificerede "påkrævede" attribut
Vælger inputelementer med gyldige værdier
For en komplet liste, gå til CSS Pseudo klasser.