Enforce
Gate the UI in React, refuse with 422 in an API endpoint, and enforce whole batches over the engine protocol.
Enforcing means acting on the decision. In the browser you gate the UI: the user sees the findings and cannot
submit while something blocks. In an API you refuse with 422, then persist, then run each command once:
de-duplicate on its idempotency key, so a retry never runs it twice. For a file of records you batch over the
engine protocol. The server always decides; the client only advises.
What to do. Gate the UI: disable submit while allowed is false, and show findingsFor(field) next to each field. The browser only advises; the server decides again when the form is submitted.
The code.
<form
className="card form"
onSubmit={(e) => {
e.preventDefault();
if (allowed) setSubmitted(true);<button type="submit" disabled={!allowed}>
Send transfer
</button>
<span className="hint">{allowed ? 'Nothing blocks this transfer on the client.' : 'Resolve the blocking findings to continue.'}</span>Run it.
npm ci && npm run build # at the repository root, once
npm run dev -w rule-cascade-example-frontend-reactThe output.
Open the form, enter an amount of 10000 or more, and the submit button stays disabled until you acknowledge the warning. The rule engine on this page behaves the same:
Try it YourselfRuns in your browser with the TypeScript engine. Nothing to install.