Ověření formuláře HTML lze provést pomocí JavaScriptu.
Pokud je pole formuláře (fname) prázdné, tato funkce upozorní na zprávu a vrátí se false, aby se zabránilo odeslání formuláře:
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}Funkci lze volat při odeslání formuláře:
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>Zkuste to sami →
<!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 se často používá k ověření číselného vstupu:
Zadejte číslo mezi 1 a 10
Zkuste to sami →
<!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>
Ověření formuláře HTML může prohlížeč provést automaticky:
Pokud je pole formuláře (fname) prázdné, atribut povinný zabrání tomu, aby byl formulář předloženo:
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>Zkuste to sami →
<!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>
Automatické ověření formuláře HTML nefunguje v aplikaci Internet Explorer 9 nebo starší.
Ověřování dat je proces, který zajišťuje, že vstup uživatele je čistý, správné a užitečné.
Typické úlohy ověřování jsou:
Vyplnil uživatel všechna povinná pole?
zadal uživatel platné datum?
zadal uživatel text do číselného pole?
Nejčastěji je účelem ověření dat zajistit správné zadání uživatele.
Validace může být definována mnoha různými metodami a nasazena v mnoha různé způsoby.
Ověření na straně serveru provádí webový server po odeslání vstupu do server.
Ověření na straně klienta se provádí pomocí webového prohlížeče před odesláním vstupu na webový server.
HTML5 představilo nový koncept ověřování HTML nazvaný omezení validace.
Ověření omezení HTML je založeno na:
Ověření omezení HTML Vstupní atributy
Ověření omezení Pseudoselektory CSS
Ověření omezení Vlastnosti a metody DOM
Určuje, že vstupní prvek by měl být zakázán
Určuje maximální hodnotu vstupního prvku
Určuje minimální hodnotu vstupního prvku
Určuje vzor hodnot vstupního prvku
Určuje, že vstupní pole vyžaduje prvek
Určuje typ vstupního prvku
Úplný seznam najdete v HTML Vstupní atributy.
Vybere vstupní prvky se zadaným atributem "disabled".
Vybere vstupní prvky s neplatnými hodnotami
Vybere vstupní prvky bez zadaného „povinného“ atributu
Vybere vstupní prvky se zadaným atributem "required".
Vybere vstupní prvky s platnými hodnotami
Úplný seznam najdete v CSS Pseudo třídy.