fix(i18n): localize native required-field validation message - #11
Merged
astaxie merged 1 commit intoJul 21, 2026
Merged
Conversation
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>
Contributor
There was a problem hiding this comment.
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/jatranslation entry for the required-field native validation message ("请填写此字段"). - Implemented shared handlers to set a localized
setCustomValidity()message onvalueMissingand clear it on user edits. - Wired the handlers into the shared
FieldInputandProviderInlineField<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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
requiredattribute, 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:
onInvalidhandler that overrides thevalueMissingmessage with the app-language string viatx("请填写此字段"). It only overrides the required/empty case, leaving other constraints (e.g.number) to their defaults.FieldInputandProviderInlineFieldcomponents (select / textarea / input), which cover the Model Catalog and all resource/provider forms.请填写此字段translation key foren(Please fill out this field) andja(このフィールドを入力してください).Testing
next build, which type-checks) passes.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