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

•

コンテンツ管理

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

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.

主な機能

01Support for the umbBindToValidation Lit directive for reactive UI binding

02JSON Path notation for precise field mapping and hierarchical error tracking

03Reactive error counting for tabs, sections, and groups

04Centralized validation management via UmbValidationContext

051 GitHub stars

06Seamless integration of client-side and server-side validation messages

ユースケース

01Integrating backend API validation errors into the Umbraco UI

02Providing real-time validation feedback in custom Umbraco workspace contexts

03Building complex multi-tab property editors or dashboards in Umbraco

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add umbraco/umbraco-cms-backoffice-skills umbraco-validation-context

For use in Claude.ai and ChatGPT

Download Skill