Svelte Form Validation with Playwright Tests

Advanced password validation form component built with Svelte 5, featuring real-time client-side validation, server-side error handling, and comprehensive Playwright E2E tests.

Features

• ✅ Real-time validation with 6 comprehensive password criteria
• ✅ Accessible form with proper ARIA labels and roles (role="alert")
• ✅ Responsive design with clean UI and error messaging
• ✅ 40+ Playwright tests covering validation, accessibility, and error handling
• ✅ API integration with proper error handling for multiple HTTP status codes
• ✅ Loading states with disabled inputs during submission
• ✅ TypeScript support with full type safety

Password Validation Rules

The form enforces these password requirements:

• Minimum 10 characters
• Maximum 24 characters
• Must contain at least one uppercase letter
• Must contain at least one lowercase letter
• Must contain at least one number
• Cannot contain spaces

Tech Stack

Tech	Purpose
Svelte 5	Reactive UI component framework
SvelteKit	Meta-framework for routing & SSR
TypeScript	Type-safe development
Vite	Build tooling
Playwright	End-to-end testing framework

Project Structure

src/
├── app.html              # HTML shell
├── routes/
│   ├── +layout.svelte    # Root layout with success message display
│   ├── +layout.ts        # Layout server logic
│   ├── +page.svelte      # Home page wrapper
│   └── create-user-form.svelte  # Main form component
└── lib/
    └── assets/
        └── index.css     # Global styles

tests/
├── signup.spec.ts        # Comprehensive test suite
└── fixtures/             # Test helpers

Getting Started

Prerequisites

• Node.js 18+
• pnpm (or npm)

Installation

git clone <repo-url>
cd svelte-form-validation
pnpm install

Development

# Start dev server (http://localhost:5173)
pnpm dev

# Run tests in UI mode
pnpm test:ui

# Run tests headless
pnpm test

Testing

Test Coverage

The test suite includes 40+ tests organized into categories:

1. Client-Side Validation (15 tests)

• Submit button disabled/enabled based on form state
• Real-time error messages for each validation rule
• Errors hide when criteria are fixed

2. Accessibility (6 tests)

• ARIA labels on inputs
• aria-invalid attribute handling
• Error containers have role="alert"

3. Server Integration (10+ tests)

• Correct request format with Bearer token
• Token extraction from URL query params
• Prevents API call when validation fails

4. Error Handling (10+ tests)

• Status 200: Success callback triggered
• Status 401/403: Authentication error
• Status 422: Custom "not allowed" message
• Status 500+: Generic error message

5. UX States (3 tests)

• Loading text on button
• Form inputs disabled during submission
• Button disabled during submission

Running Tests

# UI mode (recommended for development)
pnpm test:ui

# Headless (CI/CD)
pnpm test

# Debug mode
pnpm test:debug

# Watch mode
pnpm test -- --watch

API Integration

The form expects an API endpoint that accepts POST requests:

POST /api/signup
Content-Type: application/json
Authorization: Bearer {token}

{
  "username": "string",
  "password": "string"
}

Response Handling

Status	Behavior
200	Success callback triggered, success message shown
401/403	"Not authenticated" error message
422	Check errors array; not_allowed → custom message
500+	"Something went wrong" generic message

Form Component API

Props

interface Props {
  createSuccessful: () => void;  // Callback when form submits successfully
}

Usage

<script>
  import CreateUserForm from './routes/create-user-form.svelte';
  
  function handleSuccess() {
    console.log('User created!');
  }
</script>

<CreateUserForm createSuccessful={handleSuccess} />

Responsive Design

The form is mobile-friendly with:

• Flexible width (80% with max-width: 500px)
• Touch-friendly button (40px height)
• Clear error messaging
• Accessible color contrast

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• All browsers supported by Playwright

Key Implementation Details

Validation Logic

• Uses derived reactive stores ($derived) for real-time updates
• NO re-renders on every keystroke; updates only when needed
• Efficient regex patterns for performance

Accessibility

• Semantic HTML with proper labels
• Dynamic aria-invalid attribute (true/false/undefined)
• Error container with role="alert" for screen readers
• Accessible color contrast meeting WCAG AA

Error Handling

• No API calls if client-side validation fails
• Distinguishes between validation errors and API errors
• Clears errors on form resubmission
• Proper HTTP status code handling

Contributing

Pull requests welcome! Please:

1. Run tests before submitting: pnpm test
2. Maintain test coverage
3. Keep accessibility best practices

License

MIT

Author

Sneha - GitHub