Bootstrap 5.2 / Formulieren

Validatie

Geef je gebruikers waardevolle, bruikbare feedback met HTML5-formuliervalidatie, via het standaardgedrag van de browser of via eigen stijlen en JavaScript.

Let op

We zijn ons ervan bewust dat de eigen client-side validatiestijlen en tooltips momenteel niet toegankelijk zijn, omdat ze niet aan hulptechnologieën worden doorgegeven. Terwijl we aan een oplossing werken, raden we aan de server-side optie of de standaard validatiemethode van de browser te gebruiken.

Hoe het werkt

Zo werkt formuliervalidatie met Bootstrap:

HTML-formuliervalidatie wordt toegepast via de twee CSS-pseudo-klassen :invalid en :valid. Ze gelden voor <input>-, <select>- en <textarea>-elementen.
Bootstrap beperkt de :invalid- en :valid-stijlen tot de bovenliggende klasse .was-validated, die meestal op de <form> wordt toegepast. Zonder die klasse zou elk verplicht veld zonder waarde bij het laden van de pagina als ongeldig worden getoond. Zo bepaal jij wanneer ze geactiveerd worden (meestal nadat er geprobeerd is het formulier te versturen).
Om het uiterlijk van het formulier te resetten (bijvoorbeeld bij dynamische formulierverzendingen met AJAX), verwijder je na het versturen de klasse .was-validated weer van de <form>.
Als terugvaloptie kunnen de klassen .is-invalid en .is-valid in plaats van de pseudo-klassen worden gebruikt voor server-side validatie. Die vereisen geen bovenliggende .was-validated-klasse.
Vanwege beperkingen in de werking van CSS kunnen we (momenteel) geen stijlen toepassen op een <label> dat in de DOM vóór een formulierbesturingselement komt, zonder hulp van eigen JavaScript.
Alle moderne browsers ondersteunen de constraint validation API, een reeks JavaScript-methodes om formulierbesturingselementen te valideren.
Feedbackberichten kunnen gebruikmaken van de browserstandaarden (die per browser verschillen en niet met CSS op te maken zijn) of van onze eigen feedbackstijlen met extra HTML en CSS.
Je kunt eigen validatieberichten opgeven met setCustomValidity in JavaScript.

Bekijk met dat in gedachten de volgende demo's van onze eigen formuliervalidatiestijlen, optionele server-side klassen en browserstandaarden.

Eigen stijlen

Voor eigen Bootstrap-validatieberichten moet je het booleaanse attribuut novalidate aan je <form> toevoegen. Dat schakelt de standaard feedback-tooltips van de browser uit, maar geeft in JavaScript nog steeds toegang tot de formuliervalidatie-API's. Probeer het onderstaande formulier te versturen; onze JavaScript onderschept de verzendknop en geeft je feedback. Bij een poging tot versturen zie je de :invalid- en :valid-stijlen op je formulierbesturingselementen toegepast worden.

Eigen feedbackstijlen passen eigen kleuren, randen, focus-stijlen en achtergrondiconen toe om feedback beter over te brengen. Achtergrondiconen voor <select>s zijn alleen beschikbaar met .form-select, en niet met .form-control.

HTML

<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4">
    <label for="validationCustom01" class="form-label">Voornaam</label>
    <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
    <div class="valid-feedback">
      Ziet er goed uit!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationCustom02" class="form-label">Achternaam</label>
    <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
    <div class="valid-feedback">
      Ziet er goed uit!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationCustomUsername" class="form-label">Gebruikersnaam</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="inputGroupPrepend">@</span>
      <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
      <div class="invalid-feedback">
        Kies een gebruikersnaam.
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationCustom03" class="form-label">Plaats</label>
    <input type="text" class="form-control" id="validationCustom03" required>
    <div class="invalid-feedback">
      Vul een geldige plaats in.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom04" class="form-label">Provincie</label>
    <select class="form-select" id="validationCustom04" required>
      <option selected disabled value="">Kies...</option>
      <option>...</option>
    </select>
    <div class="invalid-feedback">
      Selecteer een geldige provincie.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom05" class="form-label">Postcode</label>
    <input type="text" class="form-control" id="validationCustom05" required>
    <div class="invalid-feedback">
      Vul een geldige postcode in.
    </div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Ga akkoord met de algemene voorwaarden
      </label>
      <div class="invalid-feedback">
        Je moet akkoord gaan voordat je verstuurt.
      </div>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Formulier versturen</button>
  </div>
</form>

Browserstandaarden

Geen behoefte aan eigen validatieberichten of aan JavaScript schrijven om formuliergedrag te wijzigen? Prima, je kunt de browserstandaarden gebruiken. Probeer het onderstaande formulier te versturen. Afhankelijk van je browser en besturingssysteem zie je een iets andere stijl feedback.

Hoewel deze feedbackstijlen niet met CSS op te maken zijn, kun je de feedbacktekst wel via JavaScript aanpassen.

HTML

<form class="row g-3">
  <div class="col-md-4">
    <label for="validationDefault01" class="form-label">Voornaam</label>
    <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
  </div>
  <div class="col-md-4">
    <label for="validationDefault02" class="form-label">Achternaam</label>
    <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
  </div>
  <div class="col-md-4">
    <label for="validationDefaultUsername" class="form-label">Gebruikersnaam</label>
    <div class="input-group">
      <span class="input-group-text" id="inputGroupPrepend2">@</span>
      <input type="text" class="form-control" id="validationDefaultUsername"  aria-describedby="inputGroupPrepend2" required>
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationDefault03" class="form-label">Plaats</label>
    <input type="text" class="form-control" id="validationDefault03" required>
  </div>
  <div class="col-md-3">
    <label for="validationDefault04" class="form-label">Provincie</label>
    <select class="form-select" id="validationDefault04" required>
      <option selected disabled value="">Kies...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-3">
    <label for="validationDefault05" class="form-label">Postcode</label>
    <input type="text" class="form-control" id="validationDefault05" required>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Ga akkoord met de algemene voorwaarden
      </label>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Formulier versturen</button>
  </div>
</form>

Server-side

We raden client-side validatie aan, maar mocht je server-side validatie nodig hebben, dan kun je ongeldige en geldige formuliervelden aangeven met .is-invalid en .is-valid. Let op: .invalid-feedback wordt ook met deze klassen ondersteund.

Zorg bij ongeldige velden dat het foutbericht met aria-describedby aan het betreffende formulierveld wordt gekoppeld (dit attribuut kan naar meer dan één id verwijzen, voor het geval het veld al naar aanvullende formuliertekst verwijst).

Om problemen met de border-radius op te lossen hebben input groups een extra .has-validation-klasse nodig.

HTML

<form class="row g-3">
  <div class="col-md-4">
    <label for="validationServer01" class="form-label">Voornaam</label>
    <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
    <div class="valid-feedback">
      Ziet er goed uit!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationServer02" class="form-label">Achternaam</label>
    <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
    <div class="valid-feedback">
      Ziet er goed uit!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationServerUsername" class="form-label">Gebruikersnaam</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="inputGroupPrepend3">@</span>
      <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
      <div id="validationServerUsernameFeedback" class="invalid-feedback">
        Kies een gebruikersnaam.
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationServer03" class="form-label">Plaats</label>
    <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
    <div id="validationServer03Feedback" class="invalid-feedback">
      Vul een geldige plaats in.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationServer04" class="form-label">Provincie</label>
    <select class="form-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
      <option selected disabled value="">Kies...</option>
      <option>...</option>
    </select>
    <div id="validationServer04Feedback" class="invalid-feedback">
      Selecteer een geldige provincie.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationServer05" class="form-label">Postcode</label>
    <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
    <div id="validationServer05Feedback" class="invalid-feedback">
      Vul een geldige postcode in.
    </div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Ga akkoord met de algemene voorwaarden
      </label>
      <div id="invalidCheck3Feedback" class="invalid-feedback">
        Je moet akkoord gaan voordat je verstuurt.
      </div>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Formulier versturen</button>
  </div>
</form>

Ondersteunde elementen

Validatiestijlen zijn beschikbaar voor de volgende formulierbesturingselementen en componenten:

<input>s en <textarea>s met .form-control (inclusief maximaal één .form-control in input groups)
<select>s met .form-select
.form-checks

HTML

<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea" class="form-label">Textarea</label>
    <textarea class="form-control" id="validationTextarea" placeholder="Verplichte voorbeeld-textarea" required></textarea>
    <div class="invalid-feedback">
      Voer een bericht in de textarea in.
    </div>
  </div>

  <div class="form-check mb-3">
    <input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
    <label class="form-check-label" for="validationFormCheck1">Vink dit selectievakje aan</label>
    <div class="invalid-feedback">Voorbeeld van foutmeldingstekst</div>
  </div>

  <div class="form-check">
    <input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" required>
    <label class="form-check-label" for="validationFormCheck2">Schakel deze radioknop</label>
  </div>
  <div class="form-check mb-3">
    <input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" required>
    <label class="form-check-label" for="validationFormCheck3">Of schakel deze andere radioknop</label>
    <div class="invalid-feedback">Nog meer voorbeeld-foutmeldingstekst</div>
  </div>

  <div class="mb-3">
    <select class="form-select" required aria-label="voorbeeld-select">
      <option value="">Open dit selectiemenu</option>
      <option value="1">Een</option>
      <option value="2">Twee</option>
      <option value="3">Drie</option>
    </select>
    <div class="invalid-feedback">Voorbeeld van foutmelding bij select</div>
  </div>

  <div class="mb-3">
    <input type="file" class="form-control" aria-label="voorbeeld-bestand" required>
    <div class="invalid-feedback">Voorbeeld van foutmelding bij bestandsinvoer</div>
  </div>

  <div class="mb-3">
    <button class="btn btn-primary" type="submit" disabled>Formulier versturen</button>
  </div>
</form>

Tooltips

Als je formulierlayout dat toelaat, kun je de klassen .{valid|invalid}-feedback vervangen door .{valid|invalid}-tooltip om validatiefeedback in een opgemaakte tooltip te tonen. Zorg dat er een bovenliggend element met position: relative is voor de positionering van de tooltip. In het onderstaande voorbeeld hebben onze kolomklassen dat al, maar jouw project vereist mogelijk een andere opzet.

HTML

<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4 position-relative">
    <label for="validationTooltip01" class="form-label">Voornaam</label>
    <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
    <div class="valid-tooltip">
      Ziet er goed uit!
    </div>
  </div>
  <div class="col-md-4 position-relative">
    <label for="validationTooltip02" class="form-label">Achternaam</label>
    <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
    <div class="valid-tooltip">
      Ziet er goed uit!
    </div>
  </div>
  <div class="col-md-4 position-relative">
    <label for="validationTooltipUsername" class="form-label">Gebruikersnaam</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
      <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
      <div class="invalid-tooltip">
        Kies een unieke en geldige gebruikersnaam.
      </div>
    </div>
  </div>
  <div class="col-md-6 position-relative">
    <label for="validationTooltip03" class="form-label">Plaats</label>
    <input type="text" class="form-control" id="validationTooltip03" required>
    <div class="invalid-tooltip">
      Vul een geldige plaats in.
    </div>
  </div>
  <div class="col-md-3 position-relative">
    <label for="validationTooltip04" class="form-label">Provincie</label>
    <select class="form-select" id="validationTooltip04" required>
      <option selected disabled value="">Kies...</option>
      <option>...</option>
    </select>
    <div class="invalid-tooltip">
      Selecteer een geldige provincie.
    </div>
  </div>
  <div class="col-md-3 position-relative">
    <label for="validationTooltip05" class="form-label">Postcode</label>
    <input type="text" class="form-control" id="validationTooltip05" required>
    <div class="invalid-tooltip">
      Vul een geldige postcode in.
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Formulier versturen</button>
  </div>
</form>

Sass

Variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Mixins

Twee mixins worden via onze loop gecombineerd om onze feedbackstijlen voor formuliervalidatie te genereren.

Standaardwaarden: zie scss/mixins/_forms.scss in de Bootstrap-broncode.

Map

Dit is de validatie-Sass-map uit _variables.scss. Overschrijf of breid deze uit om andere of extra states te genereren.

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Maps van $form-validation-states kunnen drie optionele parameters bevatten om tooltips en focus-stijlen te overschrijven.

Loop

Wordt gebruikt om over de waarden van de $form-validation-states-map te itereren en zo onze validatiestijlen te genereren. Elke wijziging in de bovenstaande Sass-map komt via deze loop in je gecompileerde CSS terecht.

Standaardwaarden: zie scss/forms/_validation.scss in de Bootstrap-broncode.

Aanpassen

Validatie-states kunnen via Sass worden aangepast met de $form-validation-states-map. Deze Sass-map staat in ons bestand _variables.scss en is de manier waarop we de standaard valid/invalid-validatie-states genereren. Er zit een geneste map bij om per state de kleur, het icoon, de tooltipkleur en de focus-schaduw aan te passen. Hoewel browsers geen andere states ondersteunen, kun je met eigen stijlen eenvoudig complexere formulierfeedback toevoegen.