Skip to content

fix(i18n): localize native required-field validation message - #11

Merged
astaxie merged 1 commit into
astaxie:mainfrom
samz406:fix/i18n-required-field-validation-message
Jul 21, 2026
Merged

fix(i18n): localize native required-field validation message#11
astaxie merged 1 commit into
astaxie:mainfrom
samz406:fix/i18n-required-field-validation-message

Conversation

@samz406

@samz406 samz406 commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

Problem

In the Model Catalog creation form (and other resource forms), leaving a required field empty and clicking Save shows the browser's native validation bubble in Chinese (请填写此字段) even when the app language is set to English or Japanese.

The forms use the HTML required attribute, so the validation message is rendered by the browser in the browser locale, completely independent of the app's i18n (tx() / activeLanguage). Switching the app to English does not change it.

Fix

Localize the native constraint-validation bubble so it follows the app language:

  • Add an onInvalid handler that overrides the valueMissing message with the app-language string via tx("请填写此字段"). It only overrides the required/empty case, leaving other constraints (e.g. number) to their defaults.
  • Clear the custom validity on change so re-validation works after the user types.
  • Wired into the shared FieldInput and ProviderInlineField components (select / textarea / input), which cover the Model Catalog and all resource/provider forms.
  • Added the 请填写此字段 translation key for en (Please fill out this field) and ja (このフィールドを入力してください).

Testing

  • Frontend production build (next build, which type-checks) passes.
  • Verified via Docker: switch app language to English/日本語, leave a required Model Catalog field empty, click Save → bubble now shows the message in the selected language.

Notes

Scope is limited to the two shared field components. A few hand-written <input required> (e.g. the login form) don't use these components and are out of scope for this PR.

🤖 Generated with Claude Code

Model Catalog and other resource forms rely on the browser's native
`required` constraint validation. The validation bubble ("请填写此字段")
is rendered by the browser in the browser locale, so it stayed Chinese
even when the app language was English or Japanese.

Localize the bubble via an `onInvalid` handler that overrides the
`valueMissing` message with the app-language string through `tx()`, and
clear it on change so re-validation still works. Wired into the shared
FieldInput and ProviderInlineField components (select/textarea/input),
which covers the Model Catalog and all resource/provider forms.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes a UX/i18n mismatch in the Next.js admin console by ensuring the browser’s native constraint-validation “required field” bubble follows the app’s selected language (via tx()), rather than the user’s browser locale.

Changes:

  • Added an en/ja translation entry for the required-field native validation message ("请填写此字段").
  • Implemented shared handlers to set a localized setCustomValidity() message on valueMissing and clear it on user edits.
  • Wired the handlers into the shared FieldInput and ProviderInlineField <select>, <textarea>, and <input> elements so the behavior applies across resource/provider forms.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@astaxie
astaxie merged commit acbd0ec into astaxie:main Jul 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants