Formulier Validatie

Dit artikel legt formulier validatie uit.

Het legt formulier validatie in HTML uit.

YouTube Video

HTML Formulier Validatie

Overzicht van HTML Formulier Validatie

• HTML formulier validatie is een mechanisme om ervoor te zorgen dat de gegevens aan bepaalde voorwaarden voldoen voordat een gebruiker deze indient. Dit vermindert server-side fouten en verbetert de gebruikerservaring.

required Attribuut

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" required placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• Het required attribuut geeft aan dat invoervelden moeten worden ingevuld voordat het formulier wordt ingediend.

pattern Attribuut

1<form>
2  <label for="username">Username (letters and numbers only):</label>
3  <input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" required>
4  <button type="submit">Submit</button>
5</form>

• Het pattern attribuut wordt gebruikt om te controleren of de formulierinvoer overeenkomt met een specifieke regex-patroon. Bijvoorbeeld, dit controleert of de gebruikersnaam alleen alfanumerieke tekens bevat.

min en max Attributen

1<form>
2    <label for="age">Age:</label>
3    <input type="number" id="age" name="age" min="18" max="99" placeholder="Enter your age">
4    <button type="submit">Submit</button>
5</form>

• <min> en <max> attributen worden gebruikt om de minimale en maximale toegestane waarden voor een invoerelement te specificeren. Ze worden vaak gebruikt met invoertypes zoals number, range en date.
• In dit voorbeeld kun je een getal invoeren tussen 18 en 99.

minlength en maxlength Attributen

1<form>
2    <label for="username">Username:</label>
3    <input type="text" id="username" name="username" minlength="4" maxlength="12" placeholder="4-12 characters">
4    <button type="submit">Submit</button>
5</form>

• Het minlength attribuut specificeert het minimum aantal vereiste tekens voor een invoerveld, terwijl het maxlength attribuut het maximum aantal toegestane tekens definieert.
• In dit voorbeeld kun je tekst invoeren van 4 tot 12 tekens.

Het attribuut type="email"

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• Het attribuut type="email" wordt gebruikt om te zorgen dat de invoer in een geldig e-mailadresformaat is. Dit attribuut biedt ingebouwde validatiefunctie voor invoervelden voor e-mailadressen.

Het attribuut type="url"

1<form>
2    <label for="website">Website:</label>
3    <input type="url" id="website" name="website" placeholder="https://example.com" required>
4    <button type="submit">Submit</button>
5</form>

• <input type="url"> biedt een invoerveld dat een correct URL-formaat vereist. De browser controleert automatisch of de invoer geldig is als een URL.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video