Pattern 22: Real-Time Lookup & Validation

Part III: Integration Patterns

Opening Scenario: The Username That Was Already Taken

Michael was signing up for a new project management tool. He spent 2 minutes crafting the perfect username:

Create Account

Username: [michael.chen.pm.2024_____] 
          (15 characters typed)

Email: [michael.chen@company.com]
Password: [********************]

[Create Account]

He filled out the entire form. Clicked "Create Account."

The page refreshed:

❌ Error: Username 'michael.chen.pm.2024' is already taken.

Please choose a different username and try again.

Michael sighed. He tried again:

Username: [michael_chen_pm______] 

[Create Account]

Page refreshed:

❌ Error: Username 'michael_chen_pm' is already taken.

Third try:

Username: [mchen_projectmgr_____] 

[Create Account]

Page refreshed:

❌ Error: Username 'mchen_projectmgr' is already taken.

After six attempts and 10 minutes, Michael finally found an available username: mchen_pm_0847

He was frustrated. "Why didn't it tell me the username was taken WHILE I was typing?"

Across town, Sarah was using a competitor's tool:

Create Account

Username: [m________________]
          ✓ Available

Username: [mi_______________]
          ✓ Available

Username: [mic______________]
          ✓ Available

Username: [mich_____________]
          ✓ Available

Username: [micha____________]
          ✓ Available

Username: [michal___________]
          ⚠ Checking...

Username: [michael__________]
          ❌ 'michael' is taken
          💡 Try: michael_s, michael27, m_sarah

Username: [michael_s________]
          ✓ Available! This username is yours.

Sarah knew instantly whether her username was available. No form submission. No page refresh. No wasted time.

The future started with now. Instant feedback. Real-time validation.

The product manager at Michael's company, Lisa, watched users struggle with the signup form. The analytics were brutal:

Average signup attempts: 4.7 Average time to complete: 8.3 minutes Abandonment rate: 38%

Lisa asked the developer, Tom: "Why don't we check username availability in real-time?"

Tom showed her the code:

// Bad: Only validates on form submission
function handleFormSubmit(event) {
  event.preventDefault();

  const username = form.username.value;

  // Check availability (first time user learns it's taken)
  const available = await checkUsername(username);

  if (!available) {
    showError('Username is already taken');
    return;
  }

  // Continue with signup...
}

// User types entire username, fills entire form,
// clicks submit, THEN learns it's taken

"Can we check it as they type?" Lisa asked.

"We could," Tom said, "but we'd need to make an API call for every keystroke. That's expensive and could overload the server."

"What if we only check after they stop typing?"

"That's called debouncing. We could do that."

Tom rebuilt the signup form with real-time validation:

class RealTimeValidator {
  constructor() {
    this.debounceDelay = 300; // Wait 300ms after typing stops
    this.cache = new Map();
  }

  setupUsernameValidation(inputElement) {
    let debounceTimer = null;

    inputElement.addEventListener('input', (e) => {
      const username = e.target.value;

      // Clear previous timer
      clearTimeout(debounceTimer);

      // Show "checking" state
      this.showCheckingState(inputElement);

      // Wait for user to stop typing
      debounceTimer = setTimeout(async () => {
        await this.validateUsername(username, inputElement);
      }, this.debounceDelay);
    });
  }

  async validateUsername(username, inputElement) {
    // Check cache first
    if (this.cache.has(username)) {
      this.showResult(inputElement, this.cache.get(username));
      return;
    }

    try {
      const response = await fetch('/api/check-username', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username })
      });

      const result = await response.json();

      // Cache result
      this.cache.set(username, result);

      // Show result
      this.showResult(inputElement, result);

    } catch (error) {
      this.showError(inputElement, 'Unable to check availability');
    }
  }

  showCheckingState(inputElement) {
    const feedback = inputElement.nextElementSibling;
    feedback.className = 'validation-feedback checking';
    feedback.innerHTML = '⚠ Checking...';
  }

  showResult(inputElement, result) {
    const feedback = inputElement.nextElementSibling;

    if (result.available) {
      feedback.className = 'validation-feedback success';
      feedback.innerHTML = '✓ Available! This username is yours.';
      inputElement.classList.add('valid');
      inputElement.classList.remove('invalid');
    } else {
      feedback.className = 'validation-feedback error';
      feedback.innerHTML = `
        ❌ '${result.username}' is taken
        ${this.renderSuggestions(result.suggestions)}
      `;
      inputElement.classList.add('invalid');
      inputElement.classList.remove('valid');
    }
  }

  renderSuggestions(suggestions) {
    if (!suggestions || suggestions.length === 0) {
      return '';
    }

    return `
      <div class="suggestions">
        💡 Try: ${suggestions.slice(0, 3).join(', ')}
      </div>
    `;
  }
}

Now when users typed:

Username: [michael_chen______]
          ⚠ Checking...

          (300ms passes)

          ❌ 'michael_chen' is taken
          💡 Try: michael_chen2, m_chen, mchen_2024

Instant feedback. No form submission needed. No wasted time.

Results after deployment: - Average signup attempts: 1.2 (down from 4.7) - Average time to complete: 1.8 minutes (down from 8.3) - Abandonment rate: 9% (down from 38%)

Real-time validation saved users 6.5 minutes per signup and reduced abandonment by 76%.

The future started with now.

Context

Real-Time Lookup & Validation applies when:

Uniqueness constraints exist: Usernames, email addresses, product SKUs must be unique

External validation needed: Credit cards, tax IDs, license numbers must be verified

User benefit from instant feedback: Knowing immediately if input is valid/available

Data changes frequently: Stock levels, seat availability, domain names

User experience critical: Reducing friction in signup, checkout, booking flows

API access available: External systems can validate in real-time

Performance acceptable: Network latency won't frustrate users

Error prevention valued: Catching problems early better than late

Problem Statement

Most forms only validate on submission, creating frustrating trial-and-error loops:

Late validation:

// Bad: User learns about problems after submitting
form.addEventListener('submit', async (e) => {
  e.preventDefault();

  const errors = await validateForm(formData);

  if (errors.length > 0) {
    showErrors(errors);
    // User just wasted time filling form with invalid data
  }
});

No availability checking:

<!-- Bad: No way to know if username is available -->
<input name="username" placeholder="Choose username">

<!-- User types "john" -->
<!-- Submits form -->
<!-- Learns "john" is taken -->
<!-- Tries "john123" -->
<!-- Also taken -->
<!-- Repeat 5 times... -->

Excessive API calls:

// Bad: API call on every keystroke
input.addEventListener('input', async (e) => {
  // User types "hello"
  // 5 API calls: h, he, hel, hell, hello
  // Overloads server
  // Wastes bandwidth
  await checkAvailability(e.target.value);
});

No caching:

// Bad: Same lookup done multiple times
async function checkUsername(username) {
  // User types "michael"
  // Backspaces to "micha"
  // Types "el" again to get "michael"
  // Makes same API call twice for "michael"
  return await api.checkUsername(username);
}

Poor user feedback:

<!-- Bad: No indication of what's happening -->
<input name="email">

<!-- User types email -->
<!-- Is it being validated? -->
<!-- Should they wait? -->
<!-- No visual feedback! -->

No suggestions:

// Bad: Just says "taken" with no alternatives
{
  available: false,
  message: "Username is taken"
}

// User has to guess alternatives
// No help provided

We need real-time validation that's fast, intelligent, user-friendly, and doesn't overload servers.

Forces

Responsiveness vs Server Load

Instant feedback requires API calls
But too many calls overload servers
Balance speed with efficiency

Freshness vs Caching

Real-time needs current data
But repeated lookups are wasteful
Balance accuracy with performance

Helpful vs Overwhelming

Rich feedback helps users
But too much information distracts
Balance guidance with simplicity

Proactive vs Intrusive

Early validation prevents errors
But validating too early annoys
Balance helpfulness with timing

Network Speed vs User Patience

Validation takes time
But users expect instant response
Balance reality with expectations

Solution

Implement intelligent real-time validation system that debounces user input, caches results, provides instant visual feedback, suggests alternatives when validation fails, and gracefully handles network issues - creating responsive, helpful validation without overwhelming servers or users.

The pattern has seven key strategies:

1. Debounced Input Validation

Wait for user to stop typing before validating:

class DebouncedValidator {
  constructor(validationFn, delay = 300) {
    this.validationFn = validationFn;
    this.delay = delay;
    this.timers = new Map();
  }

  validate(inputElement) {
    const inputId = inputElement.id || inputElement.name;

    // Clear existing timer for this input
    if (this.timers.has(inputId)) {
      clearTimeout(this.timers.get(inputId));
    }

    // Set new timer
    const timer = setTimeout(async () => {
      await this.executeValidation(inputElement);
      this.timers.delete(inputId);
    }, this.delay);

    this.timers.set(inputId, timer);
  }

  async executeValidation(inputElement) {
    const value = inputElement.value;

    // Skip if empty
    if (!value || value.length === 0) {
      this.clearFeedback(inputElement);
      return;
    }

    // Show loading state
    this.showLoading(inputElement);

    try {
      const result = await this.validationFn(value);
      this.showResult(inputElement, result);
    } catch (error) {
      this.showError(inputElement, error);
    }
  }

  showLoading(inputElement) {
    const feedback = this.getFeedbackElement(inputElement);
    feedback.className = 'validation-feedback loading';
    feedback.innerHTML = '<span class="spinner"></span> Checking...';
    inputElement.classList.add('validating');
  }

  showResult(inputElement, result) {
    const feedback = this.getFeedbackElement(inputElement);
    inputElement.classList.remove('validating');

    if (result.valid) {
      feedback.className = 'validation-feedback success';
      feedback.innerHTML = `<span class="icon">✓</span> ${result.message}`;
      inputElement.classList.add('valid');
      inputElement.classList.remove('invalid');
    } else {
      feedback.className = 'validation-feedback error';
      feedback.innerHTML = `
        <span class="icon">✗</span> ${result.message}
        ${result.suggestions ? this.renderSuggestions(result.suggestions) : ''}
      `;
      inputElement.classList.add('invalid');
      inputElement.classList.remove('valid');
    }
  }

  clearFeedback(inputElement) {
    const feedback = this.getFeedbackElement(inputElement);
    feedback.className = 'validation-feedback';
    feedback.innerHTML = '';
    inputElement.classList.remove('valid', 'invalid', 'validating');
  }

  getFeedbackElement(inputElement) {
    let feedback = inputElement.nextElementSibling;

    if (!feedback || !feedback.classList.contains('validation-feedback')) {
      feedback = document.createElement('div');
      feedback.className = 'validation-feedback';
      inputElement.parentNode.insertBefore(feedback, inputElement.nextSibling);
    }

    return feedback;
  }
}

2. Smart Caching

Cache validation results to avoid redundant API calls:

class ValidationCache {
  constructor(ttl = 300000) { // 5 minutes default
    this.cache = new Map();
    this.ttl = ttl;
  }

  get(key) {
    const cached = this.cache.get(key);

    if (!cached) {
      return null;
    }

    // Check if expired
    if (Date.now() - cached.timestamp > this.ttl) {
      this.cache.delete(key);
      return null;
    }

    return cached.value;
  }

  set(key, value) {
    this.cache.set(key, {
      value: value,
      timestamp: Date.now()
    });
  }

  invalidate(key) {
    this.cache.delete(key);
  }

  invalidatePattern(pattern) {
    // Invalidate all keys matching pattern
    const regex = new RegExp(pattern);

    Array.from(this.cache.keys()).forEach(key => {
      if (regex.test(key)) {
        this.cache.delete(key);
      }
    });
  }

  clear() {
    this.cache.clear();
  }

  // Wrapper for validation functions
  wrap(validationFn) {
    return async (value) => {
      const key = this.generateKey(value);

      // Check cache
      const cached = this.get(key);
      if (cached !== null) {
        return cached;
      }

      // Execute validation
      const result = await validationFn(value);

      // Cache result
      this.set(key, result);

      return result;
    };
  }

  generateKey(value) {
    // Normalize value for caching
    return typeof value === 'string' 
      ? value.toLowerCase().trim()
      : JSON.stringify(value);
  }
}

// Usage
const cache = new ValidationCache();
const validator = new DebouncedValidator(
  cache.wrap(async (username) => {
    // This will only be called if not in cache
    const response = await fetch('/api/check-username', {
      method: 'POST',
      body: JSON.stringify({ username })
    });
    return await response.json();
  })
);

3. Progressive Validation

Validate in stages as user progresses:

class ProgressiveValidator {
  constructor() {
    this.validationStages = new Map();
  }

  defineStages(inputElement, stages) {
    this.validationStages.set(inputElement.id, stages);
  }

  async validate(inputElement) {
    const value = inputElement.value;
    const stages = this.validationStages.get(inputElement.id);

    if (!stages) {
      return;
    }

    // Execute stages in order until one fails
    for (const stage of stages) {
      if (!this.shouldRunStage(stage, value)) {
        continue;
      }

      const result = await this.runStage(stage, value);

      if (!result.valid) {
        this.showResult(inputElement, result, stage.severity);
        return;
      }
    }

    // All stages passed
    this.showSuccess(inputElement);
  }

  shouldRunStage(stage, value) {
    // Only run stage if conditions met
    if (stage.minLength && value.length < stage.minLength) {
      return false;
    }

    if (stage.pattern && !stage.pattern.test(value)) {
      return false;
    }

    return true;
  }

  async runStage(stage, value) {
    return await stage.validate(value);
  }

  showResult(inputElement, result, severity) {
    const feedback = inputElement.nextElementSibling;

    if (severity === 'error') {
      feedback.className = 'validation-feedback error';
      inputElement.classList.add('invalid');
    } else if (severity === 'warning') {
      feedback.className = 'validation-feedback warning';
      inputElement.classList.add('warning');
    } else {
      feedback.className = 'validation-feedback info';
    }

    feedback.innerHTML = result.message;
  }
}

// Example: Email validation stages
progressiveValidator.defineStages(emailInput, [
  {
    name: 'format',
    severity: 'error',
    minLength: 3,
    pattern: /@/,
    validate: (email) => {
      const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
      return {
        valid: valid,
        message: valid ? null : 'Invalid email format'
      };
    }
  },
  {
    name: 'deliverable',
    severity: 'warning',
    validate: async (email) => {
      // Check if email is deliverable
      const result = await emailValidationAPI.check(email);
      return {
        valid: result.deliverable,
        message: result.deliverable 
          ? null 
          : 'This email may not be deliverable'
      };
    }
  },
  {
    name: 'duplicate',
    severity: 'error',
    validate: async (email) => {
      // Check if already registered
      const exists = await api.checkEmailExists(email);
      return {
        valid: !exists,
        message: exists 
          ? 'This email is already registered' 
          : null
      };
    }
  }
]);

4. Availability Checking

Check if values are available (usernames, domains, etc.):

class AvailabilityChecker {
  constructor(apiEndpoint, cache) {
    this.apiEndpoint = apiEndpoint;
    this.cache = cache;
  }

  async checkAvailability(value, type = 'username') {
    const cacheKey = `${type}:${value}`;

    // Check cache
    const cached = this.cache.get(cacheKey);
    if (cached !== null) {
      return cached;
    }

    try {
      const response = await fetch(this.apiEndpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          value: value,
          type: type
        })
      });

      const result = await response.json();

      // Generate suggestions if not available
      if (!result.available) {
        result.suggestions = await this.generateSuggestions(value, type);
      }

      // Cache result
      this.cache.set(cacheKey, result);

      return result;

    } catch (error) {
      return {
        available: null,
        error: 'Unable to check availability',
        suggestions: []
      };
    }
  }

  async generateSuggestions(value, type) {
    // Get suggestions from API
    const response = await fetch(`${this.apiEndpoint}/suggestions`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ 
        value: value,
        type: type,
        count: 5
      })
    });

    const result = await response.json();
    return result.suggestions || [];
  }

  // Username-specific checking
  async checkUsername(username) {
    return await this.checkAvailability(username, 'username');
  }

  // Domain-specific checking
  async checkDomain(domain) {
    return await this.checkAvailability(domain, 'domain');
  }

  // Email-specific checking
  async checkEmail(email) {
    return await this.checkAvailability(email, 'email');
  }
}

5. External Service Validation

Validate against external services:

class ExternalValidator {
  constructor() {
    this.validators = new Map();
  }

  registerValidator(type, validatorFn) {
    this.validators.set(type, validatorFn);
  }

  async validate(type, value) {
    const validator = this.validators.get(type);

    if (!validator) {
      throw new Error(`No validator registered for type: ${type}`);
    }

    return await validator(value);
  }
}

// Credit card validation
externalValidator.registerValidator('credit-card', async (cardNumber) => {
  // Use Stripe or similar for validation
  const stripe = window.Stripe(STRIPE_PUBLIC_KEY);

  const cardElement = stripe.elements().create('cardNumber');
  const {error, token} = await stripe.createToken(cardElement);

  if (error) {
    return {
      valid: false,
      message: error.message
    };
  }

  return {
    valid: true,
    cardType: token.card.brand,
    last4: token.card.last4
  };
});

// Tax ID validation
externalValidator.registerValidator('tax-id', async (taxId) => {
  const response = await fetch('/api/validate-tax-id', {
    method: 'POST',
    body: JSON.stringify({ taxId })
  });

  const result = await response.json();

  return {
    valid: result.valid,
    message: result.valid 
      ? 'Valid tax ID' 
      : 'Invalid tax ID format',
    details: result.details
  };
});

// Phone number validation
externalValidator.registerValidator('phone', async (phoneNumber) => {
  // Use Twilio Lookup API
  const response = await fetch(
    `https://lookups.twilio.com/v1/PhoneNumbers/${phoneNumber}`,
    {
      headers: {
        'Authorization': `Basic ${btoa(TWILIO_ACCOUNT_SID + ':' + TWILIO_AUTH_TOKEN)}`
      }
    }
  );

  if (!response.ok) {
    return {
      valid: false,
      message: 'Invalid phone number'
    };
  }

  const result = await response.json();

  return {
    valid: true,
    formatted: result.phone_number,
    carrier: result.carrier?.name,
    type: result.carrier?.type // mobile, landline, voip
  };
});

6. Real-Time Suggestions

Provide helpful suggestions as user types:

class SuggestionEngine {
  constructor(source) {
    this.source = source;
    this.debounceDelay = 200;
  }

  setupAutoSuggest(inputElement) {
    let debounceTimer = null;

    inputElement.addEventListener('input', (e) => {
      clearTimeout(debounceTimer);

      debounceTimer = setTimeout(async () => {
        await this.showSuggestions(inputElement, e.target.value);
      }, this.debounceDelay);
    });

    // Handle suggestion selection
    inputElement.addEventListener('suggestionSelected', (e) => {
      inputElement.value = e.detail.suggestion;
      this.hideSuggestions(inputElement);
    });
  }

  async showSuggestions(inputElement, query) {
    if (!query || query.length < 2) {
      this.hideSuggestions(inputElement);
      return;
    }

    const suggestions = await this.getSuggestions(query);

    if (suggestions.length === 0) {
      this.hideSuggestions(inputElement);
      return;
    }

    this.renderSuggestions(inputElement, suggestions);
  }

  async getSuggestions(query) {
    if (typeof this.source === 'function') {
      return await this.source(query);
    }

    if (typeof this.source === 'string') {
      // API endpoint
      const response = await fetch(`${this.source}?q=${encodeURIComponent(query)}`);
      const result = await response.json();
      return result.suggestions || [];
    }

    if (Array.isArray(this.source)) {
      // Local array
      return this.source.filter(item => 
        item.toLowerCase().includes(query.toLowerCase())
      );
    }

    return [];
  }

  renderSuggestions(inputElement, suggestions) {
    let dropdown = inputElement.nextElementSibling;

    if (!dropdown || !dropdown.classList.contains('suggestions-dropdown')) {
      dropdown = document.createElement('div');
      dropdown.className = 'suggestions-dropdown';
      inputElement.parentNode.insertBefore(dropdown, inputElement.nextSibling);
    }

    dropdown.innerHTML = suggestions.map((suggestion, index) => `
      <div class="suggestion-item" data-index="${index}">
        ${this.highlightMatch(suggestion, inputElement.value)}
      </div>
    `).join('');

    dropdown.style.display = 'block';

    // Add click handlers
    dropdown.querySelectorAll('.suggestion-item').forEach(item => {
      item.addEventListener('click', () => {
        const suggestion = suggestions[parseInt(item.dataset.index)];
        inputElement.dispatchEvent(new CustomEvent('suggestionSelected', {
          detail: { suggestion }
        }));
      });
    });
  }

  highlightMatch(text, query) {
    const regex = new RegExp(`(${query})`, 'gi');
    return text.replace(regex, '<strong>$1</strong>');
  }

  hideSuggestions(inputElement) {
    const dropdown = inputElement.nextElementSibling;
    if (dropdown && dropdown.classList.contains('suggestions-dropdown')) {
      dropdown.style.display = 'none';
    }
  }
}

// Example: City autocomplete
const cityAutoSuggest = new SuggestionEngine(async (query) => {
  const response = await fetch(`/api/cities?q=${query}&limit=10`);
  const result = await response.json();
  return result.cities.map(city => `${city.name}, ${city.state}`);
});

cityAutoSuggest.setupAutoSuggest(cityInput);

7. Error Recovery and Fallbacks

Handle network failures gracefully:

class ResilientValidator {
  constructor(validator, options = {}) {
    this.validator = validator;
    this.options = {
      maxRetries: options.maxRetries || 3,
      retryDelay: options.retryDelay || 1000,
      timeout: options.timeout || 5000,
      fallbackValidation: options.fallbackValidation || null
    };
  }

  async validate(value) {
    let lastError = null;

    for (let attempt = 0; attempt < this.options.maxRetries; attempt++) {
      try {
        // Add timeout to validation
        const result = await this.withTimeout(
          this.validator(value),
          this.options.timeout
        );

        return result;

      } catch (error) {
        lastError = error;

        // Wait before retry
        if (attempt < this.options.maxRetries - 1) {
          await this.sleep(this.options.retryDelay * (attempt + 1));
        }
      }
    }

    // All retries failed - use fallback if available
    if (this.options.fallbackValidation) {
      try {
        return await this.options.fallbackValidation(value);
      } catch (fallbackError) {
        // Fallback also failed
      }
    }

    // Return degraded result
    return {
      valid: null,
      error: 'Unable to validate - please try again',
      degraded: true
    };
  }

  async withTimeout(promise, timeout) {
    return Promise.race([
      promise,
      new Promise((_, reject) => 
        setTimeout(() => reject(new Error('Timeout')), timeout)
      )
    ]);
  }

  sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
}

// Usage with fallback
const validator = new ResilientValidator(
  async (email) => {
    // Primary validation via API
    const response = await fetch('/api/validate-email', {
      method: 'POST',
      body: JSON.stringify({ email })
    });
    return await response.json();
  },
  {
    fallbackValidation: async (email) => {
      // Fallback to client-side validation if API fails
      const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
      return {
        valid: valid,
        message: valid ? 'Format valid (not verified)' : 'Invalid format',
        fallback: true
      };
    }
  }
);

Implementation Details

Complete Real-Time Validation System

class RealTimeValidationSystem {
  constructor() {
    this.cache = new ValidationCache();
    this.debouncer = new DebouncedValidator(null, 300);
    this.progressive = new ProgressiveValidator();
    this.availability = new AvailabilityChecker('/api/check-availability', this.cache);
    this.external = new ExternalValidator();
    this.suggestions = new SuggestionEngine(null);
    this.resilient = new ResilientValidator(null);
  }

  setupField(inputElement, config) {
    if (config.type === 'username') {
      this.setupUsernameValidation(inputElement);
    } else if (config.type === 'email') {
      this.setupEmailValidation(inputElement);
    } else if (config.type === 'phone') {
      this.setupPhoneValidation(inputElement);
    } else if (config.type === 'domain') {
      this.setupDomainValidation(inputElement);
    } else if (config.type === 'custom') {
      this.setupCustomValidation(inputElement, config.validator);
    }
  }

  setupUsernameValidation(inputElement) {
    const validator = this.cache.wrap(async (username) => {
      return await this.availability.checkUsername(username);
    });

    this.debouncer.validationFn = validator;

    inputElement.addEventListener('input', () => {
      this.debouncer.validate(inputElement);
    });
  }

  setupEmailValidation(inputElement) {
    this.progressive.defineStages(inputElement, [
      {
        name: 'format',
        severity: 'error',
        validate: (email) => {
          const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
          return {
            valid: valid,
            message: valid ? null : 'Invalid email format'
          };
        }
      },
      {
        name: 'available',
        severity: 'error',
        validate: async (email) => {
          const result = await this.availability.checkEmail(email);
          return {
            valid: result.available,
            message: result.available 
              ? 'Email available' 
              : 'Email already registered',
            suggestions: result.suggestions
          };
        }
      }
    ]);

    inputElement.addEventListener('input', () => {
      this.progressive.validate(inputElement);
    });
  }

  setupPhoneValidation(inputElement) {
    const validator = async (phone) => {
      return await this.external.validate('phone', phone);
    };

    const resilientValidator = new ResilientValidator(validator, {
      fallbackValidation: (phone) => {
        const valid = /^\+?[1-9]\d{1,14}$/.test(phone);
        return {
          valid: valid,
          message: valid ? 'Format valid' : 'Invalid phone format',
          fallback: true
        };
      }
    });

    this.debouncer.validationFn = resilientValidator.validate.bind(resilientValidator);

    inputElement.addEventListener('input', () => {
      this.debouncer.validate(inputElement);
    });
  }
}

// Usage
const validator = new RealTimeValidationSystem();

// Setup username field
validator.setupField(usernameInput, { type: 'username' });

// Setup email field
validator.setupField(emailInput, { type: 'email' });

// Setup phone field
validator.setupField(phoneInput, { type: 'phone' });

Consequences

Benefits

Instant Feedback: - Know immediately if input is valid - No waiting for form submission - Faster iteration

Better UX: - Reduced frustration - Clear guidance - Helpful suggestions

Fewer Errors: - Catch problems early - Prevent invalid submissions - Guide users to correct input

Higher Completion: - Less abandonment - Faster form completion - More successful submissions

Reduced Server Load: - Fewer invalid submissions - Caching reduces API calls - Debouncing prevents spam

Liabilities

Network Dependency: - Requires API access - Network latency affects UX - Failures degrade experience

Server Load: - More API calls than batch validation - Need good caching strategy - Rate limiting necessary

Complexity: - More code than simple validation - Debouncing/caching to manage - Error handling critical

Privacy Concerns: - Sending data before submission - May expose attempts - Need secure transmission

False Confidence: - Real-time validation can fail - Server-side validation still needed - Never trust client alone

Domain Examples

User Registration

// Username availability
validator.setupField(usernameInput, {
  type: 'username',
  minLength: 3,
  suggestions: true
});

// Email deliverability
validator.setupField(emailInput, {
  type: 'email',
  checkDeliverable: true,
  checkDuplicate: true
});

E-commerce Checkout

// Credit card validation
validator.setupField(cardInput, {
  type: 'credit-card',
  validateWithStripe: true
});

// Promo code validation
validator.setupField(promoInput, {
  type: 'custom',
  validator: async (code) => {
    return await api.validatePromoCode(code);
  }
});

Domain Registration

// Domain availability
validator.setupField(domainInput, {
  type: 'domain',
  suggestions: true,
  checkDNS: true
});

Booking Systems

// Seat availability
validator.setupField(seatInput, {
  type: 'custom',
  validator: async (seat) => {
    return await api.checkSeatAvailability(seat);
  }
});

Prerequisites: - Volume 3, Pattern 21: External Data Integration (provides data sources) - Volume 3, Pattern 6: Domain-Aware Validation (validation logic)

Synergies: - Volume 3, Pattern 10: Semantic Suggestions (suggest alternatives) - Volume 3, Pattern 4: Smart Defaults (pre-fill from validation) - All patterns (real-time enhances all validation)

Conflicts: - Offline-first applications - High-latency connections - Privacy-focused forms

Alternatives: - Submit-time validation only - Client-side only validation - Hybrid approach (some real-time, some batch)

Known Uses

Twitter: Username availability while typing

Gmail: Email address suggestions and validation

Airbnb: Availability checking in real-time

Stripe: Credit card validation as you type

GoDaddy: Domain availability search

GitHub: Username/repository name availability

Zoom: Meeting ID validation

LinkedIn: Profile URL availability

Pattern 22: Real-Time Lookup & Validation

Opening Scenario: The Username That Was Already Taken

Context

Problem Statement

Forces

Responsiveness vs Server Load

Freshness vs Caching

Helpful vs Overwhelming

Proactive vs Intrusive

Network Speed vs User Patience

Solution

1. Debounced Input Validation

2. Smart Caching

3. Progressive Validation

4. Availability Checking

5. External Service Validation

6. Real-Time Suggestions

7. Error Recovery and Fallbacks

Implementation Details

Complete Real-Time Validation System

Consequences

Benefits

Liabilities

Domain Examples

User Registration

E-commerce Checkout

Domain Registration

Booking Systems

Known Uses

Further Reading

Academic Foundations

Practical Implementation

Standards & Performance

Tools & Services

Implementation Examples

Pattern 22: Real-Time Lookup & Validation

Opening Scenario: The Username That Was Already Taken

Context

Problem Statement

Forces

Responsiveness vs Server Load

Freshness vs Caching

Helpful vs Overwhelming

Proactive vs Intrusive

Network Speed vs User Patience

Solution

1. Debounced Input Validation

2. Smart Caching

3. Progressive Validation

4. Availability Checking

5. External Service Validation

6. Real-Time Suggestions

7. Error Recovery and Fallbacks

Implementation Details

Complete Real-Time Validation System

Consequences

Benefits

Liabilities

Domain Examples

User Registration

E-commerce Checkout

Domain Registration

Booking Systems

Related Patterns

Known Uses

Further Reading

Academic Foundations

Practical Implementation

Standards & Performance

Related Trilogy Patterns

Tools & Services

Implementation Examples