Example 06 · Localization
A fully localized Spanish form
This form translates messages from the core workflow and the session recovery addon. Everything uses native HTML and a simulated transport that sends no data.
Scenario
Someone starts a request, accidentally reloads the page, and needs to decide whether to restore or discard their progress. Validation, submission, errors, and recovery are communicated in the same language as the form.
Try it
- Submit the empty form to hear and see native validation.
- Complete a few fields, wait a moment, and reload this page in the same tab.
- Use the Spanish prompt to restore or discard the saved progress.
- Simulate an error, change the outcome to success, and choose the retry button.
Guidance request
The outcome selector controls only the local transport. No data leaves your browser.
Accessibility notes
- The form’s
lang="es"attribute identifies its Spanish content within the English page. - The form keeps visible labels, native controls, and constraint validation.
- Dynamic messages reuse a polite, atomic status region.
- Restoring, discarding, or changing submission state does not move focus.
- The design communicates states with text and borders in addition to color.
- Recovery uses
sessionStorage; it is not encrypted and never includes files.
Developer notes
- Imports use
../../assets/package/index.jsand../../assets/package/addons/session-recovery.js. - The core and addon receive separate message catalogs.
- The example uses
restoreMode: "prompt", an allowlist of fields, and a local transport.
View both message catalogs
const coreMessages = {
submitting: "Enviando…",
succeeded: "La solicitud se envió correctamente.",
validationFailed: "Corrige los errores del formulario e inténtalo de nuevo.",
networkFailed: "No se pudo enviar la solicitud. Comprueba tu conexión e inténtalo de nuevo.",
serverFailed: "El servicio no pudo completar la solicitud. Inténtalo de nuevo más tarde.",
retrying: "Reintentando el envío…",
offline: "Parece que no tienes conexión. La solicitud no se ha enviado.",
online: "Se ha restablecido la conexión. Puedes volver a intentar el envío.",
duplicateBlocked: "Ya hay un envío en curso.",
navigationInterrupted: "Es posible que el envío anterior se haya interrumpido.",
retryAvailable: "Puedes volver a intentar el envío."
};
const sessionMessages = {
promptTitle: "¿Quieres restaurar el formulario guardado?",
promptDescription: "Hay una versión reciente sin terminar de este formulario en esta pestaña.",
restoreAction: "Restaurar formulario",
discardAction: "Descartar formulario guardado",
restored: "Se restauraron los valores guardados del formulario.",
restoredWithFiles: "Se restauraron los valores guardados. Vuelve a seleccionar los archivos.",
discarded: "Se descartó el formulario guardado."
};