Multi-Step Registration Form Validator

Build a multi-step user registration form validator that organizes validation into logical groups for progressive validation across form steps.

Problem

You need to implement a registration form validation system for a multi-step wizard. The form has three steps:

1. Account Information: username, email, password
2. Personal Details: firstName, lastName, dateOfBirth
3. Preferences: newsletter subscription, terms acceptance

Each step should be independently validatable. Users should only see validation errors for the current step they're working on, and they should be able to navigate between steps with validation state preserved.

Requirements

Implement a validation system that:

1. Groups validations by form step - Organize validators into three distinct groups: "account", "personal", and "preferences"

2. Validates each group independently - Each group should be validatable separately without affecting other groups

3. Tracks step-level validation state - Each group should expose whether it's valid/invalid, has errors, and has been touched

4. Preserves validation state - When users navigate between steps, validation state should remain intact

5. Provides step completion status - The system should indicate which steps are complete and valid

Test Cases

• Account group validates username (required, min 3 chars), email (required, email format), and password (required, min 8 chars) independently @test
• Personal group validates firstName (required), lastName (required), and dateOfBirth (required) independently @test
• Preferences group validates newsletter (boolean) and terms (required, must be true) independently @test
• Validating one group does not trigger validation in other groups @test

Implementation

@generates

API

/**
 * Creates a multi-step form validator with grouped validations
 *
 * @param {Object} formData - Reactive form data object containing all fields
 * @param {Object} validationGroups - Validation rules organized by group
 * @returns {Object} Validation state with group-level access
 */
export function createMultiStepValidator(formData, validationGroups);

Dependencies { .dependencies }

@vuelidate/core { .dependency }

Provides core validation functionality and state management for Vue.js

@vuelidate/validators { .dependency }

Provides built-in validators like required, email, and minLength