HTML-formulärvalidering kan göras med JavaScript.
Om ett formulärfält (fname) är tomt, varnar den här funktionen ett meddelande och returnerar falskt, för att förhindra att formuläret skickas:
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
Funktionen kan anropas när blanketten skickas in:
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
Prova själv →
<!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 används ofta för att validera numerisk inmatning:
Ange ett tal mellan 1 och 10
Prova själv →
<!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-formulärvalidering kan utföras automatiskt av webbläsaren:
Om ett formulärfält (fname) är tomt, förhindrar attributet required
att detta formulär lämnats:
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
Prova själv →
<!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-formulärvalidering fungerar inte i Internet Explorer 9 eller tidigare.
Datavalidering är processen för att säkerställa att användarinmatning är ren, korrekt och användbar.
Typiska valideringsuppgifter är:
har användaren fyllt i alla obligatoriska fält?
har användaren angett ett giltigt datum?
har användaren skrivit in text i ett numeriskt fält?
Oftast är syftet med datavalidering att säkerställa korrekt användarinmatning.
Validering kan definieras med många olika metoder och användas i många olika sätt.
Verifiering på serversidan utförs av en webbserver efter att indata har skickats till server.
Verifiering på klientsidan utförs av en webbläsare innan indata skickas till en webbserver.
HTML5 introducerade ett nytt HTML-valideringskoncept som heter constraint validering.
HTML-begränsningsvalidering baseras på:
Begränsningsvalidering HTML Indataattribut
Begränsningsvalidering CSS Pseudo Selectors
Begränsningsvalidering DOM-egenskaper och metoder
Anger att inmatningselementet ska inaktiveras
Anger det maximala värdet för ett inmatningselement
Anger minimivärdet för ett inmatningselement
Anger värdemönstret för ett inmatningselement
Anger att inmatningsfältet kräver ett element
Anger typen av ett inmatningselement
För en fullständig lista, gå till HTML Inmatningsattribut.
Väljer indataelement med attributet "disabled" specificerat
Väljer indataelement med ogiltiga värden
Väljer indataelement som inte har angett något "obligatoriskt" attribut
Väljer indataelement med attributet "required" specificerat
Väljer indataelement med giltiga värden
För en fullständig lista, gå till CSS Pseudoklasser.