54 lines
2.0 KiB
React
54 lines
2.0 KiB
React
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;
|