---
name: forms-validation
description: "Build forms that distinguish validation, network and server failures. Use for forms, validation, UX."
---

# Формы и валидация

Build forms that distinguish validation, network and server failures.

## Implementation decisions

1. Validate syntax on the client for usability and all trust boundaries on the server.
2. Prevent duplicate submissions while pending; use idempotency for real mutations.
3. Preserve user input on failure and provide retry.
4. Focus the first invalid field and link error text through aria-describedby.

## Working source

Read [components/demos.tsx](../webcraft-shared/source/components/demos.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions.

## Verify observable behavior

- Invalid data produces specific errors.
- Network failure never appears as success.
- Slow requests do not duplicate submissions.

## Scope

Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative.

Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/form

Version 2.0.0 · Original WEBCRAFT content · MIT