User Registration Form with Server-side Validation

Build a user registration form that validates user input both on the client-side and integrates server-side validation errors. The form should display validation errors from both sources and allow users to clear server errors when they modify a field.

@generates

Capabilities

Client-side Form Validation

The form collects four fields: username, email, password, and confirm password. Implement client-side validation with these rules:

• Username: Required, minimum 3 characters, maximum 20 characters

• Email: Required, valid email format

• Password: Required, minimum 8 characters

• Confirm password: Required, must match the password field

• When username is "ab", email is "test@example.com", password is "password123", and confirm is "password123", validation shows username minimum length error @test

Server-side Validation Integration

When the form is submitted, if client-side validation passes, call the validateOnServer(formData) function. This function returns server-side validation errors in the format { fieldName: [errorMessage] }. These errors should be integrated into the validation state and displayed alongside client-side errors.

The mock server validation function is:

async function validateOnServer(formData) {
  await new Promise(resolve => setTimeout(resolve, 500));
  const errors = {};
  if (formData.username === 'admin' || formData.username === 'root') {
    errors.username = ['This username is reserved'];
  }
  if (formData.email && formData.email.endsWith('@blocked.com')) {
    errors.email = ['Email domain is not allowed'];
  }
  return Object.keys(errors).length > 0 ? errors : null;
}

• When username is "admin", email is "user@example.com", password is "password123", and confirm is "password123", after form submission the validation shows "This username is reserved" error for username @test
• When username is "john", email is "user@blocked.com", password is "password123", and confirm is "password123", after form submission the validation shows "Email domain is not allowed" error for email @test

Server Error Clearing

When a user modifies a field that has a server-side error, that server-side error should be cleared while preserving any client-side validation errors.

• After receiving server-side errors, when the username field is modified, the server-side error for username is cleared @test

API

/**
 * Creates a registration form with validation
 * @returns {Object} Object containing formData (reactive form values) and v$ (validation state)
 */
export function createRegistrationForm();

/**
 * Submits the form and integrates server validation results
 * @param {Object} v$ - The validation state object
 * @param {Object} formData - The form data object
 * @returns {Promise<boolean>} True if submission succeeds (no errors), false otherwise
 */
export async function submitForm(v$, formData);

Dependencies { .dependencies }

@vuelidate/core { .dependency }

Provides core validation functionality and state management.

@vuelidate/validators { .dependency }

Provides built-in validators for common validation rules.