NestJS validationError.target — ValidationPipe playground

<div class="pg">
    <h1 class="pg-title">🎮 Watch validationError.target change what exceptionFactory sees</h1>
    <p class="pg-sub">
      This is a <b>model</b> of how <code>ValidationPipe</code> merges <code>validationError</code>
      options before calling class-validator's <code>validate()</code> — not a running NestJS server.
      Pick a version, a pipe option, and whether your <code>exceptionFactory</code> reads
      <code>error.target</code>, then send an invalid request and watch exactly what it receives.
    </p>

<div class="banner info">
      Simulated model — walks the real option-merge and <code>ValidationError</code> shape from
      <code>@nestjs/common</code>'s own source and the v12.2.0 release notes, in plain JS. No real
      server, no real class-validator.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="btn-row" style="flex-wrap:wrap; gap:14px;">
        <div class="field">
          <span class="ctl-label">@nestjs/core version</span>
          <div class="seg" id="versionSeg">
            <button type="button" aria-pressed="false" data-val="12.1">12.1.x (pre-12.2)</button>
            <button type="button" aria-pressed="true" data-val="12.2">12.2+ (current)</button>
          </div>
        </div>
      </div>
      <div class="btn-row" style="flex-wrap:wrap; gap:14px; margin-top:12px;">
        <div class="field">
          <span class="ctl-label">Your ValidationPipe's <code>validationError</code> option</span>
          <div class="seg" id="optionSeg">
            <button type="button" aria-pressed="true" data-val="unset">Not set (default)</button>
            <button type="button" aria-pressed="false" data-val="true">{ target: true }</button>
            <button type="button" aria-pressed="false" data-val="false">{ target: false }</button>
          </div>
        </div>
      </div>
      <div class="btn-row" style="flex-wrap:wrap; gap:14px; margin-top:12px;">
        <div class="field">
          <span class="ctl-label">Does your <code>exceptionFactory</code> read <code>error.target</code>?</span>
          <div class="seg" id="readsSeg">
            <button type="button" aria-pressed="true" data-val="yes">Yes — logs error.target.email</button>
            <button type="button" aria-pressed="false" data-val="no">No — only uses property/value/constraints</button>
          </div>
        </div>
      </div>
      <div class="btn-row" style="margin-top:12px">
        <button class="btn primary" id="run">▶️ Send invalid POST /users</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
      <div class="presets" style="margin-top:12px">
        <button class="btn sm" data-preset="upgrade">Preset: fresh 12.2 upgrade, old exceptionFactory</button>
        <button class="btn sm" data-preset="fixed">Preset: fixed exceptionFactory, any version</button>
        <button class="btn sm" data-preset="restored">Preset: 12.2 with target restored on purpose</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Pipe pipeline</div>
      <div class="pipeline" id="pipeline">
        <div class="stage" data-stage="validate"><span class="ico">🧪</span>validate()<span class="sub">class-validator builds ValidationError[]</span></div>
        <div class="stage" data-stage="merge"><span class="ico">🔀</span>option merge<span class="sub">target: false, ...yours</span></div>
        <div class="stage" data-stage="factory"><span class="ico">⚙️</span>exceptionFactory<span class="sub">reads whatever survived the merge</span></div>
      </div>
      <div class="arrowrow">left → right · the middle stage only exists on 12.2+</div>

<div class="status" id="statusLine">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — pick conditions above and send a request.</span>
      </div>
      <p class="hint" id="caption">Every ValidationError always has `property`, `constraints`, and `value`. Only `target` is conditional.</p>
      <div class="code-preview" id="errorPreview">first ValidationError: —</div>
      <div class="code-preview" id="factoryPreview">exceptionFactory builds: —</div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.