Vormi kontrollimine enne edastamist
Bootstrap 5 võimaldab ka vormi erinevate elementide etteantud tingimustele vastavust kontrollida ja neid ka kujundada, kui sisu ei vasta sellele, mida vorm ette näeb.
Aluseks võtame eelmisel, 16. korral, kasutatud vormi.
Esmalt lisame vormile attribuudi novalidate, mis muudab mitteaktiivseks veebilehitseja automaatsed kommentaarid, kui sisestatakse valed andmed.
Lisaks lisame vormile ka klassi needs-validation, mida kasutame JavaScripti koodi aktiveerimiseks antud vormil.
Selle tulemusena näeb meie vormi määratlemine välja järgmine:
<form action="kiri.php" id="andmevorm" method="post" class="d-grid gap-2 mb-4 needs-validation" novalidate>
Vormi iga elemendi juurde saame nüüd lisada kommentaarid juhuks, kui:
- sisestatud info vastab etteantud tingimustele, lisades kasti klassiga valid-feedback
-
<div class="valid-feedback"> Sobib! </div>
-
- sisestatud info ei vasta etteantud tingimustele, lisades kasti klassiga invalid-feedback
-
<div class="invalid-feedback"> Palun sisesta vajalik info! </div>
-
Näiteks siis järgmiselt (NB! Lisatud on ka info selle kohta, et tegu on kohustusliku andmeväljaga (required):
<input class="form-control" type="text" name="nimi" placeholder="Sisestage palun oma nimi" required> <div class="valid-feedback"> Sobib! </div> <div class="invalid-feedback"> Palun sisesta nimi! </div>
Kui kogu vorm on selliselt üle käidud, siis tuleb osasse <script> ja </script>, lisada järgmine JavaScript’i kood:
(function () {
'use strict'
// analüüsitakse kõiki vorme, millel on klass 'needs-validation'
var forms = document.querySelectorAll('.needs-validation')
// liigutakse leitud vormidel ja välistatakse edastamine
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()