CustomEvent on the <form> element, whether or not data-ui="false" is set — this is the full order a normal, successful submission fires in, and where it branches on failure:
1
raykoi:ready
Once, when the form has finished attaching. Nothing to do with a submission yet — just confirms Raykoi found and wired up the form.
2
raykoi:start
The visitor clicked submit. Fires before any validation runs.
3
raykoi:validate
Client-side validation is running against the native HTML constraints on your inputs.
4
raykoi:validation-error — branches here on a bad field
Validation failed, client or server side —
event.detail.errors. The lifecycle stops here; nothing below fires for this attempt.5
raykoi:submit
Validation passed. The request is now in flight.
6
raykoi:progress
Zero or more times, while uploading files or waiting on the request —
event.detail matches the SDK’s SubmitProgress shape.7
raykoi:state
Fires alongside every transition above (and the two below) —
event.detail.state is the new state: idle → validating → uploading → submitting → success | error | aborted. One event to watch instead of five if all you need is “what phase are we in.”8
raykoi:success or raykoi:error
The outcome.
success’s event.detail is the result; error covers anything that isn’t a validation failure — network, server, or rate-limit errors.raykoi:abort can fire instead of success/error if the submission was cancelled — not shown in the sequence above since it can happen at any point after raykoi:submit.