Vue 3 + Vuelidate: rule sameAs no es reactiva y evita el POST del formulario (Inertia + Laravel)

by

સુધી.

Postmortem: Non-Reactive Vuelidate Validation Blocking Form Submission in Vue 3

Summary

During client-side validation of الأشخاص password confirmation in a Vue 3 application using Vuelidate, the sameAs validator did not reactively update when the password changed. This caused the form to remain invalid even when passwords matched, blocking POST submission via Inertia.js. The گیاڏم was traced to a non-reactive dependency in Vuelidate’s rule declaration.

Root Cause

The sameAs validator was initialized with a static reference to modal.form.password, which captured the initial value (likely undefined or empty) at the time of rule construction. Vuelidate’s rules are not dynamically re-evaluated unless defined as functions. Key factors:

  • Static Value Capture: Passing modal.form.password directly to sameAs meant the rule compared against the initial snapshot of password (empty), not its current value.
  • Reactivity Gap: Vuelidate does not automatically track changes to raw values used in rule definitions. Rules must be set up to re-evaluate.
  • Unmet Reactivity Requirement: The Vue 3 reactivity system requires dependencies to be accessed inside functions or computed to be tracked. Direct object references bypass reactivity.

Why This Happens in Real Systems

This issue commonly occurs in reactive validation libraries for three reasons:

  • Rule Authorship Assumption: Developers might assume the validator library wraps values in reactivity internally (like Vue’s computed), but many validators require explicit function-based dependencies to stay lightweight.
  • Two-Way Data Flow: Validation rules often depend on the current state of other fields (like password and confirmation). When inter-field dependencies exist, lifecycle mismatches easily arise.
  • Failed Silent: The UI _appeared@” to update (input fields showed matching values) but the validation state was sticktaped` due to the outdated reference.

Real-World Impact

  • User Friction: Users experienced misleading validation errors even after correctly re-typing passwords, leading to confusion and perceived app unreliability.
  • Submission Block: Form submission was persistently blocked despite valid data.
  • Development Delay: Debugging required identifying the reactive gap in validation rules, slowing feature delivery.

Example or Code (if necessary and relevant)

// ❌ Problematic: Non-reactive comparison
const rules = {
  form: {
    password_confirmation: {
      sameAs: sameAs(modal.form.password) // Static initial password value captured
    }
  }
};

// ✅ Fixed: Reactive function-based comparison
const rules = {
  form: {
    password_confirmation: {
      sameAs: sameAs(() => modal.form.password) // Function re-evaluates on every check
    }
  }
};