2026-10-27 14:34:42 +01:00
parent acf2deaea3
commit 3367fea887
261 changed files with 24597 additions and 48 deletions
@@ -0,0 +1,53 @@
+import { Navigate } from 'react-router-dom';
+import Router from './routes/Router';
+
+// components
+import Navbar from './components/navs/Navbar';
+
+function App() {
+  return (
+    <>
+      <Navbar />
+      <Navigate to="/contact" />
+      <main id="main">
+        <Router />
+
+        <div className="container py-3">
+          <div className="alert alert-primary">
+            <h3>Übung 17: Formularvalidierung über validator</h3>
+            <p>
+              Erweitere das Kontaktformular, um die Eingaben des Benutzers mit der <code>validator</code>-Bibliothek zu
+              validieren. Die <code>validator</code>-Bibliothek bietet eine Vielzahl von Funktionen zur Validierung von
+              Eingaben, z.B. für E-Mail-Adressen, URLs, Zahlen usw.
+            </p>
+            <ul className="list">
+              <li>Installiere die validator-Bibliothek.</li>
+              <li>
+                Verwende die <code>isEmail</code>-Funktion, um die E-Mail-Adresse des Benutzers zu validieren.
+              </li>
+              <li>Überprüfe die Länge der Eingaben für firstname, lastname und message.</li>
+              <li>Zeige entsprechende Fehlermeldungen an, wenn die Eingaben ungültig sind.</li>
+            </ul>
+          </div>
+        </div>
+        <div className="container py-3">
+          <div className="alert alert-primary">
+            <h3>Übung 18: Formularvalidierung nach Eingabe</h3>
+            <p>
+              Bisher haben wir die Formularvalidierung nur beim Absenden des Formulars durchgeführt. Erweitere das
+              Kontaktformular, um die Eingaben des Benutzers in Echtzeit zu validieren. Das bedeutet, dass die
+              Fehlermeldungen sofort angezeigt werden, wenn der Benutzer ein Feld verlässt und eine ungültige Eingabe
+              macht.
+            </p>
+            <p>
+              <strong>Hinweis:</strong> Verwende das <code>onBlur</code>-Event, um die Validierung nach dem Verlassen
+              eines Feldes auszulösen.
+            </p>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}
+
+export default App;