JavaScript Formulieren

JavaScript formulier verificatie

HTML formulier verificatie kan worden uitgevoerd met JavaScript.

Als het formulierveld (fname) leeg is, zal deze functie een bericht weergeven en return false, om te voorkomen dat het formulier wordt ingediend:

JavaScript voorbeeld

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Naam moet worden ingevuld");
    return false;
  }
}

Deze functie kan worden aangeroepen bij het indienen van het formulier:

HTML formulier voorbeeld

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Naam: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

Probeer het zelf uit

JavaScript kan numerieke invoer verifiëren

JavaScript wordt meestal gebruikt voor het verifiëren van numerieke invoer:

Voer een getal in tussen 1 en 10 in:

Probeer het zelf uit

Automatische HTML formulier verificatie

HTML formulier verificatie kan automatisch worden uitgevoerd door de browser:

Als het formulierveld (fname) leeg is, dan required Eigenschappen die het indienen van dit formulier blokkeren:

HTML formulier voorbeeld

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

Probeer het zelf uit

Tip:Automatische HTML-formulierverificatie werkt niet in Internet Explorer 9 of eerder.

Data-verificatie

Data-verificatie is het proces om ervoor te zorgen dat de gebruikersinput schoon, correct en nuttig is.

Typische verificatietaken zijn:

  • Heeft de gebruiker alle verplichte velden ingevuld?
  • Heeft de gebruiker een geldige datum ingevoerd?
  • Heeft de gebruiker tekst ingevoerd in het numerieke veld?

In de meeste gevallen is het doel van data-verificatie om ervoor te zorgen dat de gebruikersinput correct is.

Verificatie kan op vele verschillende manieren worden gedefinieerd en op vele verschillende manieren worden ingezet.

Serververificatie wordt uitgevoerd door de webserver nadat de input naar de server is gestuurd.

Voordat de input naar de webserver wordt gestuurd, voert de webbrowser de clientverificatie uit.

HTML beperkte verificatie

HTML5 introduceerde een nieuw concept van HTML-verificatie genaamd beperkte verificatie.

HTML beperking validatie is gebaseerd op:

  • Beperking validatie HTML input eigenschappen
  • Beperking validatie CSS pseudoselector
  • Beperking validatie DOM eigenschappen en methoden

Beperking validatie HTML input eigenschappen

Eigenschappen Beschrijving
disabled Stel in dat het input-element moet worden uitgeschakeld.
max Stel de maximale waarde van het input-element in.
min Stel de minimale waarde van het input-element in.
pattern Stel het waardepatroon van het input-element in.
required Stel in dat het input-veld verplicht is.
type Stel het type van het input-element in.

Voor een volledige lijst, bezoek HTML Input eigenschappen.

Beperking validatie CSS pseudoselector

Selector Beschrijving
:disabled Selecteer een input-element dat het 'disabled' kenmerk heeft.
:invalid Selecteer een input-element met een ongeldig kenmerk.
:optional Selecteer een input-element dat geen 'required' kenmerk heeft.
:required Selecteer een input-element dat het 'required' kenmerk heeft.
:valid Selecteer een input-element met een geldige waarde.

Voor een volledige lijst, bezoek CSS pseudoklasse.