Je gaat een formulier met validatieregels bouwen in React Hook Form, dat er uiteindelijk zo uit zal zien:
Als je het project gecloned hebt naar jouw locale machine, installeer je eerst de node_modules door het volgende
commando in de terminal te runnen:
npm install
Wanneer dit klaar is, kun je de applicatie starten met behulp van:
npm start
of gebruik de WebStorm knop (npm start). Open http://localhost:3000 om de pagina in de browser te bekijken. Begin met
het maken van wijzigingen in src/App.js: elke keer als je een bestand opslaat, zullen de wijzigingen te zien zijn op
de webpagina.
-
Het formulier bevat de volgende velden:
- Voornaam (verplicht)
- Achternaam (verplicht)
- Leeftijd (verplicht, minimaal 18)
- Postcode (verplicht, validatie op patroon getal-getal-getal-getal-letter-letter)
- Bezorgfrequentie als selectbox (verplicht, met opties: iedere week, om de week, iedere maand, anders)
- Andere frequentie als tekstveld (alleen tonen indien "anders" geselecteerd wordt)
- Opmerkingen
- Akkoord met de voorwaarden als checkbox
- Verzendbutton
-
Alle velden worden gevalideerd tijdens het typen, nog voor de gebruiker op submit heeft gedrukt
-
Alle validatieregels bevatten foutmeldingen die dynamisch worden getoond aan de gebruiker
-
Als de gebruiker op versturen drukt, worden alle waardes gelogd.
Maak eigen componenten van input-elementen die je vaak hebt hergebruikt. Zorg ervoor dat je in het overkoepelende
component het formulier één keer initialiseerd (met useForm) en de benodigdheden doorgeeft als properties aan de
componenten.
- Maak er een mooie gestylde pagina van!