JavaScript formuláře
Ověření formuláře JavaScript
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í hodnotu false, aby se zabránilo odeslání formuláře:
Příklad JavaScriptu
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:
Příklad formuláře HTML
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
JavaScript může ověřit číselný vstup
JavaScript se často používá k ověření číselného vstupu:
Zadejte číslo mezi 1 a 10
Automatické ověření HTML formuláře
Ověření formuláře HTML může prohlížeč provést automaticky:
Pokud je pole formuláře (fname) prázdné, required
atribut zabrání odeslání tohoto formuláře:
Příklad formuláře HTML
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
Automatické ověření formuláře HTML nefunguje v aplikaci Internet Explorer 9 nebo starší.
Ověření dat
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 mnoha různými způsoby.
Ověření na straně serveru provádí webový server po odeslání vstupu na server.
Ověření na straně klienta se provádí webovým prohlížečem před odesláním vstupu na webový server.
Ověření omezení HTML
HTML5 představilo nový koncept ověřování HTML nazvaný ověřování omezení .
Ověření omezení HTML je založeno na:
- Ověření omezení Vstupní atributy HTML
- Pseudoselektory CSS pro ověření omezení
- Ověření omezení Vlastnosti a metody DOM
Ověření omezení HTML vstupní atributy
Attribute | Description |
---|---|
disabled | Specifies that the input element should be disabled |
max | Specifies the maximum value of an input element |
min | Specifies the minimum value of an input element |
pattern | Specifies the value pattern of an input element |
required | Specifies that the input field requires an element |
type | Specifies the type of an input element |
Úplný seznam naleznete v části Vstupní atributy HTML .
Pseudoselektory CSS pro ověření omezení
Selector | Description |
---|---|
:disabled | Selects input elements with the "disabled" attribute specified |
:invalid | Selects input elements with invalid values |
:optional | Selects input elements with no "required" attribute specified |
:required | Selects input elements with the "required" attribute specified |
:valid | Selects input elements with valid values |
Úplný seznam najdete na CSS Pseudo Classes .