Errors and Validation

Primus Forms are backend-driven.

Form-level errors

Use the error input on primus-form for:

• Authentication failures
• Permission errors
• Server-side validation errors

Field-level errors

Each field accepts an error input.

Field errors are:

• Visually highlighted
• Announced to screen readers
• Focused automatically on submit failure

Do not implement custom error rendering.

Primus SaaS UI Components

@primus/ui-core uses [data-field="error"] and aria-invalid for native validation display. Setup →

<!-- Field-level error -->
<div data-field="error">
  <label for="email">Email</label>
  <input id="email" type="email" aria-invalid="true" value="not-an-email" />
  <span class="error">Please enter a valid email address.</span>
</div>

<!-- Form-level alert -->
<div role="alert" data-variant="danger" style="margin-bottom: 1rem">
  3 errors found. Please correct them before continuing.
</div>

<form>
  <div data-field="error">
    <label>Card number <input type="text" aria-invalid="true" /></label>
    <span class="error">Card number must be 16 digits.</span>
  </div>
  <div data-field="error">
    <label>Expiry <input type="text" aria-invalid="true" placeholder="MM/YY" /></label>
    <span class="error">This card has expired.</span>
  </div>
  <button type="submit">Pay now</button>
</form>