umbraco-validation-context

Implement client-side and server-side form validation in Umbraco backoffice UI using UmbValidationContext and JSON Path.

4|Updated Mar 6, 2026
One-click install
npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-validation-context-albanistrefi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-validation-context
Source: https://github.com/albanistrefi/umbraco_CLI/tree/main/skills/extensions/umbraco-validation-context
Command: npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-validation-context-albanistrefi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UmbValidationContext centralizes client/server validation for complex Umbraco backoffice forms, so multi-step, tabbed, and workspace editor UIs can present consistent validation feedback with accurate error counting.

Core Features & Use Cases

  • Centralized validation state: Manage validation messages in one place with reactive updates for the UI.
  • JSON Path targeting: Bind inputs and track validation messages using JSON Path (e.g., $.form.tab1.email).
  • Scoped error counting: Observe messages of a path and its descendants to show per-tab/per-section error badges.
  • Client + server validation: Add server-side validation errors into the same message system after API calls.

Quick Start

Create an UmbValidationContext in your custom form component, bind each input with umbBindToValidation using a JSON Path, then call validation.validate() before submitting and display validation messages inside uui-form-validation-message elements.

Frequently Asked Questions about umbraco-validation-context

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement reactive form validation in the Umbraco backoffice UI?▼

Centralized validation in the Umbraco backoffice is achieved by creating an UmbValidationContext instance to manage reactive updates and binding inputs with umbBindToValidation using specific JSON Path routes.

How does JSON Path targeting work for Umbraco workspace editor validation?▼

JSON Path targeting for Umbraco workspace editor validation works by binding inputs to paths like $.form.tab1.email, allowing messagesOfPathAndDescendant to observe and aggregate scoped error counts for specific tabs or sections.

Can I add server-side API validation errors to Umbraco client forms?▼

Yes, you can add server-side API validation errors to Umbraco client forms by using the messages.addMessage method, injecting errors into the same centralized reactive message system using source and JSON Path.

What is the best way to show error badges for multi-step forms in Umbraco?▼

The best way to show error badges for multi-step forms in Umbraco is observing messagesOfPathAndDescendant on a specific JSON Path, which aggregates scoped error counts for reactive UI updates across tabs or steps.

Does UmbValidationContext support complex tabbed editors in Umbraco?▼

Yes, UmbValidationContext supports complex tabbed editors in Umbraco by centralizing client and server validation state, ensuring consistent feedback and accurate error counting across multi-step and workspace UI components.