How does this skill handle multi-tab forms?

It uses JSON Path hierarchies (e.g., $.form.tab1) to track and count errors per section or tab, allowing developers to show error badges on specific UI elements.

Can I use it with server-side validation errors?

Yes, the skill provides patterns for mapping API error responses to the validation context using unique keys and JSON paths to display server-side feedback.

Why is JSON Path used for validation in Umbraco?

JSON Path allows for a structured, hierarchical way to reference fields in complex data objects, making it easy to manage validation for nested properties and collections.

Does this skill work with Umbraco's Lit-based architecture?

Yes, it is specifically designed for the Umbraco backoffice extension framework using Lit elements and the umbBindToValidation directive.

What is UmbValidationContext?

It is a centralized system in the Umbraco backoffice that manages validation states, messages, and error counts for UI components and forms.

Umbraco Validation Context

Name: Umbraco Validation Context
Author: umbraco

byumbraco

•

Gestión de Contenido

Simplifies the implementation of complex form validation and error reporting in the Umbraco backoffice using JSON Path notation.

Acerca de

The Umbraco Validation Context skill provides developers with a robust framework for managing form states within the Umbraco backoffice ecosystem. By leveraging the UmbValidationContext, it enables centralized validation management for multi-step forms, workspace editors, and tabbed interfaces. It supports both immediate client-side feedback and the mapping of asynchronous server-side errors, using JSON Path notation to precisely link validation messages to specific UI fields and providing reactive error counts that help guide users through complex data entry tasks.

Características Principales

Support for the umbBindToValidation Lit directive for reactive UI binding
JSON Path notation for precise field mapping and hierarchical error tracking
Reactive error counting for tabs, sections, and groups
Centralized validation management via UmbValidationContext
1 GitHub stars
Seamless integration of client-side and server-side validation messages

Casos de Uso

Integrating backend API validation errors into the Umbraco UI
Providing real-time validation feedback in custom Umbraco workspace contexts
Building complex multi-tab property editors or dashboards in Umbraco

Acerca de

Características Principales

Support for the umbBindToValidation Lit directive for reactive UI binding
JSON Path notation for precise field mapping and hierarchical error tracking
Reactive error counting for tabs, sections, and groups
Centralized validation management via UmbValidationContext
1 GitHub stars
Seamless integration of client-side and server-side validation messages

Casos de Uso

Integrating backend API validation errors into the Umbraco UI
Providing real-time validation feedback in custom Umbraco workspace contexts
Building complex multi-tab property editors or dashboards in Umbraco