Bootstrap - Validierung: Ein umfassender Leitfaden für Anfänger

Hallo da draußen, ambitionierte Web-Entwickler! Heute tauchen wir in die Welt der Bootstrap-Validierung ein. Als Ihr freundlicher Nachbarschafts-Computerlehrer bin ich aufgeregt, Sie auf dieser Reise zu begleiten. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind - wir beginnen mit den Grundlagen und arbeiten uns hoch. Am Ende dieses Tutorials werden Sie Formulare wie ein Profi validieren können!

Was ist Bootstrap-Validierung?

Bevor wir ins Detail gehen, lassen Sie uns verstehen, was Bootstrap-Validierung überhaupt ist. Stellen Sie sich vor, Sie füllen ein Online-Formular aus und lassen versehentlich ein erforderliches Feld leer. Plötzlich hebt das Formular dieses Feld in Rot hervor und sagt Ihnen, es auszufüllen. Das ist Formularvalidierung in Aktion! Bootstrap, unser zuverlässiges Frontend-Toolkit, bietet uns integrierte Validierungsfunktionen, um diesen Prozess reibungslos und benutzerfreundlich zu gestalten.

benutzerdefinierte Stile

Lassen Sie uns mit benutzerdefinierten Stilen für unsere Formularvalidierung beginnen. Bootstrap ermöglicht es uns, unserer Validierung einen eigenen Akzent zu verleihen. Hier ist ein einfaches Beispiel:

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">Benutzername</label>
<input type="text" class="form-control" id="username" required>
<div class="invalid-feedback">
Bitte wählen Sie einen Benutzernamen.
</div>
</div>
<button class="btn btn-primary" type="submit">Formular einreichen</button>
</form>

In diesem Beispiel haben wir der Klasse needs-validation zu unserem Formular hinzugefügt und novalidate gesetzt, um die Standard-Browservalidierung zu verhindern. Das required-Attribut im Eingabefeld weist Bootstrap an, dass dieses Feld ausgefüllt werden muss.

Nun fügen wir etwas JavaScript hinzu, um es funktionieren zu lassen:

(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();

Dieses JavaScriptcode fügt Event-Listener zu unserem Formular hinzu, die die Gültigkeit überprüfen, wenn das Formular eingereicht wird. Wenn das Formular ungültig ist, verhindert es die Einreichung und fügt die Klasse was-validated hinzu, was unsere benutzerdefinierten Stile auslöst.

Browser-Standard

Manchmal möchten Sie möglicherweise die Standardvalidierungsstile des Browsers verwenden. Das ist so, als liesse man den Browser die schwere Arbeit für sich erledigen! Hier ist, wie Sie das tun können:

<form>
<div class="form-group">
<label for="email">E-Mail-Adresse</label>
<input type="email" class="form-control" id="email" required>
</div>
<button class="btn btn-primary" type="submit">Einreichen</button>
</form>

In diesem Fall haben wir die Klasse needs-validation und das Attribut novalidate entfernt. Der Browser wird jetzt die Validierung mit seinen Standardstilen übernehmen.

Serverseitige Validierung

Obwohl die Client-seitige Validierung großartig für das Benutzererlebnis ist, sollten wir immer serverseitige Validierung für die Sicherheit implementieren. Hier ist ein einfaches PHP-Beispiel:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$email = test_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Ungültiges E-Mail-Format";
}
}

function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>

Dieser PHP-Code überprüft, ob die eingereichte E-Mail gültig ist. Denken Sie immer daran: Vertrauen Sie niemals Benutzerinput!

Unterstützte Elemente

Bootstrap-Validierung unterstützt verschiedene Formularelemente. Lassen Sie uns einige betrachten:

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">Benutzername</label>
<input type="text" class="form-control" id="username" required>
</div>
<div class="form-group">
<label for="password">Passwort</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="form-group">
<label for="country">Land</label>
<select class="form-control" id="country" required>
<option value="">Auswählen...</option>
<option>USA</option>
<option>UK</option>
<option>Kanada</option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="terms" required>
<label class="form-check-label" for="terms">
Zustimmung zu den Nutzungsbedingungen
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Formular einreichen</button>
</form>

Dieses Formular enthält Texteingabe, Passworteingabe, Auswahlliste und Kontrollkästchen - alles von Bootstrap-Validierung unterstützt.

Tooltips

Möchten Sie Ihren Validierungsnachrichten einen zusätzlichen Glanz verleihen? Probieren Sie Tooltips aus! Hier ist, wie man das macht:

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">Benutzername</label>
<input type="text" class="form-control" id="username" required>
<div class="invalid-tooltip">
Bitte wählen Sie einen eindeutigen Benutzernamen.
</div>
</div>
<button class="btn btn-primary" type="submit">Formular einreichen</button>
</form>

Wir haben invalid-feedback durch invalid-tooltip ersetzt. Jetzt sehen Sie stattdessen eine schicke Tooltip!

Validierungsmethoden

Hier ist eine Tabelle mit häufig verwendeten Validierungsmethoden, die Sie verwenden können:

Methode	Beschreibung
required	Feld darf nicht leer sein
minlength	Mindestlänge der Zeichen
maxlength	Maximallänge der Zeichen
min	Mindestwert für numerische Eingaben
max	Maximalwert für numerische Eingaben
type="email"	Muss eine gültige E-Mail-Adresse sein
pattern	Muss einem bestimmten Muster entsprechen

Denken Sie daran, dass Sie diese Methoden kombinieren können, um komplexere Validierungsregeln zu erstellen!

Und das war's, Leute! Wir haben die Grundlagen der Bootstrap-Validierung behandelt, von benutzerdefinierten Stilen bis hin zu Tooltips. Denken Sie daran, Übung macht den Meister, also fürchten Sie sich nicht, mit diesen Konzepten zu experimentieren. Viel Spaß beim Programmieren und möge Ihre Formulare stets validiert sein!

Credits: Image by storyset