Full Form Example

This comprehensive example demonstrates how all form components work together in a real-world scenario, complete with validation, sanitization, and proper error handling using our security utilities.

Features

Two Form Modes

The example provides two distinct modes to showcase different validation strategies:

1. Basic Mode - Minimal validation for quick forms

   • Name is required
   • Email format validation
   • Optional phone field

2. Full Validation Mode - Comprehensive validation for registration

   • All basic validations
   • Username requirements (3-20 characters)
   • Password strength (minimum 8 characters)
   • Password confirmation matching
   • Country selection required
   • Terms and privacy acceptance required

Security Integration

The form leverages our domain layer security utilities for robust validation:

import { 
  validateEmail, 
  validateAndSanitizeUsername, 
  validatePassword,
  sanitizeText 
} from '$lib/shared/domain/security';

Validation Examples

Email Validation:

const emailResult = validateEmail(formData.email);
if (!emailResult.isValid) {
  errors.email = emailResult.errors[0];
}

Username Sanitization:

const usernameResult = validateAndSanitizeUsername(formData.username);
if (!usernameResult.isValid) {
  errors.username = usernameResult.errors[0];
} else {
  formData.username = usernameResult.sanitized;
}

Form Structure

The form is organized into logical sections for better user experience:

Personal Information

• Full Name (with text sanitization)
• Email (with format validation)
• Phone (optional)
• Country selection

Account Setup (Validation Mode)

• Username (sanitized and validated)
• Password (strength requirements)
• Password confirmation (matching validation)

Preferences

• Language selection
• Theme selection
• Contact method (radio group)
• Email notifications (toggle)
• Newsletter subscription (toggle)

Legal Requirements

• Terms of Service acceptance
• Privacy Policy acceptance

Best Practices Demonstrated

User Experience

• Clear sections - Related fields grouped together
• Helper text - Guidance for complex requirements
• Inline errors - Immediate feedback on validation
• Loading states - Visual feedback during submission
• Success feedback - Confirmation with auto-dismiss
• Reset functionality - Allow users to start over

Security

• Input sanitization - Prevent XSS attacks
• Validation layers - Client-side validation with server-ready patterns
• Password security - Minimum strength requirements
• Username restrictions - Reserved names and format rules

Accessibility

• Proper labels - All inputs have associated labels
• Error announcements - Screen reader friendly error messages
• Required indicators - Clear marking of required fields
• Keyboard navigation - Full keyboard support

Implementation Notes

Form Submission

The form uses standard HTML form submission with preventDefault:

<form onsubmit={(e) => { 
  e.preventDefault(); 
  handleSubmit(); 
}}>
  <!-- form fields -->
</form>

Validation Flow

1. User submits form
2. Validation functions run
3. Errors displayed inline
4. On success, show confirmation
5. Auto-reset after 3 seconds

State Management

All form state is managed with Svelte 5 runes:

let formData = $state({
  name: '',
  email: '',
  username: '',
  // ... other fields
});

let errors = $state<Record<string, string>>({});
let loading = $state(false);
let submitted = $state(false);

Try It Out

The demo above provides a fully interactive example. Try:

1. Switching between Basic and Validation modes
2. Submitting with empty required fields
3. Entering invalid email formats
4. Testing password requirements
5. Seeing the success state after valid submission

The form automatically resets after successful submission, allowing you to experiment with different scenarios.