JavaScript -formulieren
JavaScript-formuliervalidatie
HTML-formuliervalidatie kan worden gedaan door JavaScript.
Als een formulierveld (fname) leeg is, waarschuwt deze functie een bericht, en retourneert false, om te voorkomen dat het formulier wordt verzonden:
JavaScript-voorbeeld
function validateForm() {
let
x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}De functie kan worden aangeroepen wanneer het formulier wordt verzonden:
HTML-formuliervoorbeeld
<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 kan numerieke invoer valideren
JavaScript wordt vaak gebruikt om numerieke invoer te valideren:
Voer een getal in tussen 1 en 10
Automatische HTML-formuliervalidatie
HTML-formuliervalidatie kan automatisch worden uitgevoerd door de browser:
Als een formulierveld (fname) leeg is, verhindert het requiredattribuut dat dit formulier wordt ingediend:
HTML-formuliervoorbeeld
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
Automatische HTML-formuliervalidatie werkt niet in Internet Explorer 9 of eerder.
Gegevensvalidatie
Gegevensvalidatie is het proces om ervoor te zorgen dat gebruikersinvoer schoon, correct en nuttig is.
Typische validatietaken zijn:
- heeft de gebruiker alle verplichte velden ingevuld?
- heeft de gebruiker een geldige datum ingevoerd?
- heeft de gebruiker tekst in een numeriek veld ingevoerd?
Meestal is het doel van gegevensvalidatie om te zorgen voor correcte gebruikersinvoer.
Validatie kan op veel verschillende manieren worden gedefinieerd en op veel verschillende manieren worden ingezet.
Validatie aan de serverzijde wordt uitgevoerd door een webserver, nadat invoer naar de server is verzonden.
Validatie aan de clientzijde wordt uitgevoerd door een webbrowser, voordat invoer naar een webserver wordt verzonden.
Validatie van HTML-beperking
HTML5 introduceerde een nieuw HTML-validatieconcept genaamd constraint-validatie .
HTML-beperkingsvalidatie is gebaseerd op:
- Validatie van beperkingen HTML -invoerkenmerken
- Beperking validatie CSS Pseudo Selectors
- Validatie van beperkingen DOM-eigenschappen en -methoden
Beperking Validatie HTML-invoerkenmerken
| 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 |
Ga voor een volledige lijst naar HTML-invoerkenmerken .
Beperking Validatie CSS Pseudo Selectors
| 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 |
Ga voor een volledige lijst naar CSS Pseudo Classes .