Help mij met het implementeren van geavanceerde formulierverwerking in Svelte
description
Met deze prompt kan de gebruiker geavanceerde formulieren bouwen die zorgen voor betere gebruikerservaring en robuustere invoercontrole. Het lost problemen op zoals het valideren van invoer en het dynamisch aanpassen van formulierinhoud, wat moeilijk kan zijn zonder specifieke kennis van Svelte. Hierdoor kan de gebruiker efficiënter en professioneler webapplicaties ontwikkelen.
prompt
Help mij bij het opzetten van geavanceerde formulierverwerking in mijn Svelte-applicatie. Beschrijf hoe ik formuliervalidatie, foutafhandeli ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een uitgebreide gids voor het opzetten van geavanceerde formulierverwerking in je Svelte-applicatie, inclusief validatie, foutafhandeling en dynamische velden:
1. Stap 1: Basisstructuur en data-binding
Maak een Svelte-component aan met formuliervelden en bind ze aan component-variabelen:
```svelte
<script>
import { onMount } from 'svelte';
// Formuliervelden
let username = '';
let email = '';
let password = '';
// Foutmeldingen
let errors = {
username: '',
email: '',
password: ''
};
// Dynamische velden (bijvoorbeeld extra optionele velden)
let extraFields = [];
// Validatie functies
function validateUsername() {
if (username.trim().length < 3) {
errors.username = 'Gebruikersnaam moet minstens 3 tekens bevatten.';
} else {
errors.username = '';
}
}
function validateEmail() {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
errors.email = 'Ongeldig e-mailadres.';
} else {
errors.email = '';
}
}
function validatePassword() {
if (password.length < 8) {
errors.password = 'Wachtwoord moet minstens 8 tekens bevatten.';
} else {
errors.password = '';
}
}
// Realtime validatie bij invoer
$: validateUsername(), $: validateEmail(), $: validatePassword();
// Submit handler
function handleSubmit() {
// Voorkom indien er fouten
validateUsername();
validateEmail();
validatePassword();
const hasErrors = Object.values(errors).some(error => error !== '');
if (hasErrors) {
alert('Verbeter de fouten voordat je het formulier indient.');
return;
}
// Formuliergegevens verzenden
const formData = {
username,
email,
password,
// Voeg dynamische velden toe indien nodig
};
// Voorbeeld: API-aanroep of verdere verwerking
console.log('Formulier verzonden:', formData);
}
// Dynamische formuliervelden toevoegen
function addExtraField() {
extraFields = [...extraFields, { id: Date.now(), value: '' }];
}
</script>
```
2. Stap 2: HTML en foutmeldingen weergeven
```svelte
<form on:submit|preventDefault={handleSubmit}>
<div>
<label for="username">Gebruikersnaam:</label>
<input id="username" type="text" bind:value={username} />
{#if errors.username}
<p class="error">{errors.username}</p>
{/if}
</div>
<div>
<label for="email">E-mail:</label>
<input id="email" type="email" bind:value={email} />
{#if errors.email}
<p class="error">{errors.email}</p>
{/if}
</div>
<div>
<label for="password">Wachtwoord:</label>
<input id="password" type="password" bind:value={password} />
{#if errors.password}
<p class="error">{errors.password}</p>
{/if}
</div>
<!-- Dynamische velden -->
{#each extraFields as field (field.id)}
<div>
<label>Extra veld:</label>
<input type="text" bind:value={field.value} />
</div>
{/each}
<button type="button" on:click={addExtraField}>Voeg extra veld toe</button>
<button type="submit">Verzenden</button>
</form>
<style>
.error {
color: red;
font-size: 0.9em;
}
</style>
```
3. Stap 3: Verbeteringen en best practices
- **Validatie bij elke invoer**: Zoals hierboven gedaan, door `$:` reactieve statements.
- **Dynamische velden**: Voeg velden toe via array en gebruik `{#each}`.
- **Foutafhandeling**: Toon foutmeldingen onder de velden.
- **Asynchrone validatie**: Voor server-side checks, gebruik `async` functies in `validate` functies en beheer de status.
4. Stap 4: Extra functionaliteiten
- Gebruik Svelte-validators of externe bibliotheken voor uitgebreide validatie.
- Voeg visuele indicatoren toe (bijvoorbeeld rood randje bij fouten).
- Implementeer loading states of successmeldingen na verzending.
Met deze aanpak heb je een solide basis voor geavanceerde formulierverwerking in Svelte, inclusief realtime validatie, foutmeldingen en dynamische velden.
provider: deepseek
model: deepseek-chat
Hier is een uitgebreide handleiding voor geavanceerde formulierverwerking in Svelte:
## 1. Basisformulierstructuur
```svelte
<!-- Form.svelte -->
<script>
let formData = {
gebruikersnaam: '',
email: '',
wachtwoord: ''
};
let errors = {};
let isSubmitting = false;
</script>
<form on:submit|preventDefault={handleSubmit}>
<!-- Formuliervelden komen hier -->
</form>
```
## 2. Geavanceerde Validatie met Svelte Stores
```javascript
// stores/validation.js
import { writable, derived } from 'svelte/store';
// Validatieregels
const validationRules = {
gebruikersnaam: (value) => {
if (!value) return 'Gebruikersnaam is verplicht';
if (value.length < 3) return 'Minimaal 3 karakters';
if (!/^[a-zA-Z0-9_]+$/.test(value)) return 'Alleen letters, cijfers en underscores';
return null;
},
email: (value) => {
if (!value) return 'E-mail is verplicht';
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return 'Ongeldig e-mailadres';
return null;
},
wachtwoord: (value) => {
if (!value) return 'Wachtwoord is verplicht';
if (value.length < 8) return 'Minimaal 8 karakters';
if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
return 'Moet hoofdletters, kleine letters en cijfers bevatten';
}
return null;
}
};
// Validatie store
export function createFormStore(initialData) {
const formData = writable(initialData);
const touched = writable({});
const errors = derived([formData, touched], ([$formData, $touched]) => {
const errorObj = {};
Object.keys(validationRules).forEach(field => {
if ($touched[field] || Object.keys($touched).length === 0) {
errorObj[field] = validationRules[field]($formData[field]);
}
});
return errorObj;
});
const isValid = derived(errors, $errors => {
return Object.values($errors).every(error => error === null);
});
return {
formData,
errors,
isValid,
touched,
setField: (field, value) => {
formData.update(data => ({ ...data, [field]: value }));
touched.update(t => ({ ...t, [field]: true }));
},
setTouched: (field) => {
touched.update(t => ({ ...t, [field]: true }));
}
};
}
```
## 3. Dynamisch Formulier Component
```svelte
<!-- AdvancedForm.svelte -->
<script>
import { createFormStore } from './stores/validation.js';
import { onDestroy } from 'svelte';
const initialData = {
gebruikersnaam: '',
email: '',
wachtwoord: ''
};
const form = createFormStore(initialData);
let { formData, errors, isValid, touched } = form;
let isSubmitting = false;
let submitMessage = '';
// Realtime validatie bij input
function handleInput(field, value) {
form.setField(field, value);
}
function handleBlur(field) {
form.setTouched(field);
}
async function handleSubmit() {
// Markeer alle velden als touched voor validatie
Object.keys($formData).forEach(field => form.setTouched(field));
if (!$isValid) {
submitMessage = 'Corrigeer de fouten voordat je doorgaat';
return;
}
isSubmitting = true;
submitMessage = '';
try {
// Simuleer API call
const response = await fetch('/api/registreer', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify($formData)
});
if (!response.ok) throw new Error('Server error');
submitMessage = 'Registratie succesvol!';
// Reset formulier
formData.set(initialData);
touched.set({});
} catch (error) {
submitMessage = 'Er ging iets mis. Probeer het opnieuw.';
} finally {
isSubmitting = false;
}
}
</script>
<form on:submit|preventDefault={handleSubmit} class="form-container">
<!-- Gebruikersnaam Field -->
<div class="form-field">
<label for="gebruikersnaam">Gebruikersnaam:</label>
<input
id="gebruikersnaam"
type="text"
bind:value={$formData.gebruikersnaam}
on:input={() => handleInput('gebruikersnaam', $formData.gebruikersnaam)}
on:blur={() => handleBlur('gebruikersnaam')}
class:error={$errors.gebruikersnaam && $touched.gebruikersnaam}
aria-invalid={$errors.gebruikersnaam ? 'true' : 'false'}
aria-describedby={$errors.gebruikersnaam ? 'gebruikersnaam-error' : undefined}
/>
{#if $errors.gebruikersnaam && $touched.gebruikersnaam}
<span id="gebruikersnaam-error" class="error-message">
{$errors.gebruikersnaam}
</span>
{/if}
</div>
<!-- E-mail Field -->
<div class="form-field">
<label for="email">E-mail:</label>
<input
id="email"
type="email"
bind:value={$formData.email}
on:input={() => handleInput('email', $formData.email)}
on:blur={() => handleBlur('email')}
class:error={$errors.email && $touched.email}
/>
{#if $errors.email && $touched.email}
<span class="error-message">{$errors.email}</span>
{/if}
</div>
<!-- Wachtwoord Field -->
<div class="form-field">
<label for="wachtwoord">Wachtwoord:</label>
<input
id="wachtwoord"
type="password"
bind:value={$formData.wachtwoord}
on:input={() => handleInput('wachtwoord', $formData.wachtwoord)}
on:blur={() => handleBlur('wachtwoord')}
class:error={$errors.wachtwoord && $touched.wachtwoord}
/>
{#if $errors.wachtwoord && $touched.wachtwoord}
<span class="error-message">{$errors.wachtwoord}</span>
{/if}
</div>
<!-- Submit Button -->
<button
type="submit"
disabled={isSubmitting || !$isValid}
class:loading={isSubmitting}
>
{#if isSubmitting}
Versturen...
{:else}
Registreer
{/if}
</button>
{#if submitMessage}
<div class:success={!submitMessage.includes('fout')} class="submit-message">
{submitMessage}
</div>
{/if}
</form>
<style>
.form-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
.form-field {
margin-bottom: 1rem;
position: relative;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
}
input {
width: 100%;
padding: 0.5rem;
border: 2px solid #ddd;
border-radius: 4px;
transition: border-color 0.3s;
}
input.error {
border-color: #e74c3c;
}
input:focus {
outline: none;
border-color: #3498db;
}
.error-message {
color: #e74c3c;
font-size: 0.875rem;
margin-top: 0.25rem;
display: block;
}
button {
width: 100%;
padding: 0.75rem;
background: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
button:disabled {
background: #bdc3c7;
cursor: not-allowed;
}
button.loading {
background: #95a5a6;
}
.submit-message {
margin-top: 1rem;
padding: 0.75rem;
border-radius: 4px;
text-align: center;
}
.submit-message.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.submit-message:not(.success) {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
</style>
```
## 4. Dynamische Velden Toevoegen
```svelte
<!-- Voor dynamische velden zoals meerdere e-mailadressen -->
<script>
let extraEmails = [''];
function addEmailField() {
extraEmails = [...extraEmails, ''];
}
function removeEmailField(index) {
extraEmails = extraEmails.filter((_, i) => i !== index);
}
function updateExtraEmail(index, value) {
extraEmails = extraEmails.map((email, i) => i === index ? value : email);
}
</script>
{#each extraEmails as email, index}
<div class="dynamic-field">
<input
type="email"
bind:value={email}
placeholder="Extra e-mailadres"
/>
{#if index > 0}
<button type="button" on:click={() => removeEmailField(index)}>
Verwijder
</button>
{/if}
</div>
{/each}
<button type="button" on:click={addEmailField}>
Extra e-mail toevoegen
</button>
```
## 5. Gebruik in je App
```svelte
<!-- App.svelte -->
<script>
import AdvancedForm from './AdvancedForm.svelte';
</script>
<main>
<h1>Registratieformulier</h1>
<AdvancedForm />
</main>
```
Deze implementatie biedt:
- **Realtime validatie** tijdens het typen
- **Foutmeldingen** die direct verschijnen
- **Toegankelijkheid** met ARIA-attributen
- **Dynamische velden** die toegevoegd/verwijderd kunnen worden
- **Nette foutafhandeling** met gebruikersfeedback
- **Clean code** met Svelte stores voor state management
De validatie wordt automatisch geüpdatet en het formulier voorkomt verzending bij fouten!