Fix card name validation to match backend byte counting#81899
Fix card name validation to match backend byte counting#81899carlosmiceli merged 5 commits intomainfrom
Conversation
carlosmiceli
changed the title
melvin-bot
bot
requested review from
heyjennahay
and removed request for
a team
|
Hey @hungvu193, gave your theory to Claude to get a solution up, and seems like we already use |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 13d727a4a0
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_PERSONAL_CARD_NAME_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_PERSONAL_CARD_NAME_FORM> => { | ||
| const errors = getFieldRequiredErrors(values, [INPUT_IDS.NAME], translate); | ||
| const length = values.name.length; | ||
| const length = getCommentLength(values.name); |
There was a problem hiding this comment.
The new validation uses getCommentLength, which is explicitly designed for comment markdown and the AddComment backend auth validator (it parses markdown, replaces non‑ASCII with \u????, and trims). For card names this will miscount length for inputs with emoji/accented characters or leading/trailing spaces, so users can be blocked even when the UTF‑8 byte length is within CONST.STANDARD_LENGTH_LIMIT, or allowed locally while the backend rejects. This is a regression from simple .length and doesn’t match byte counting; consider using StringUtils.getUTF8ByteLength/isValidInputLength or a card‑specific byte counter instead.
Useful? React with 👍 / 👎.
|
@hungvu193 attempting with |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -46,9 +46,9 @@ function PersonalCardEditNamePage({route}: PersonalCardEditNamePageProps) { | |||
|
|
|||
| const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_PERSONAL_CARD_NAME_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_PERSONAL_CARD_NAME_FORM> => { | |||
| const errors = getFieldRequiredErrors(values, [INPUT_IDS.NAME], translate); | |||
There was a problem hiding this comment.
❌ CONSISTENCY-6 (docs)
Reasoning: The code calls isValidInputLength(values.name, ...) without first checking if values.name exists. If the form field is undefined or empty, this could cause a runtime error since isValidInputLength expects a string parameter but might receive undefined.
Suggested fix: Only call isValidInputLength after verifying the field has a value, following the pattern used in other parts of the codebase:
const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_PERSONAL_CARD_NAME_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_PERSONAL_CARD_NAME_FORM> => {
const errors = getFieldRequiredErrors(values, [INPUT_IDS.NAME], translate);
if (values.name) {
const {isValid, byteLength} = isValidInputLength(values.name, CONST.STANDARD_LENGTH_LIMIT);
if (!isValid) {
addErrorMessage(errors, INPUT_IDS.NAME, translate('common.error.characterLimitExceedCounter', byteLength, CONST.STANDARD_LENGTH_LIMIT));
}
}
return errors;
};Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
| @@ -50,9 +50,9 @@ function WorkspaceCompanyCardEditCardNamePage({route}: WorkspaceCompanyCardEditC | |||
|
|
|||
| const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_WORKSPACE_COMPANY_CARD_NAME_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_WORKSPACE_COMPANY_CARD_NAME_FORM> => { | |||
| const errors = getFieldRequiredErrors(values, [INPUT_IDS.NAME], translate); | |||
There was a problem hiding this comment.
❌ CONSISTENCY-6 (docs)
Reasoning: The code calls isValidInputLength(values.name, ...) without first checking if values.name exists. If the form field is undefined or empty, this could cause a runtime error since isValidInputLength expects a string parameter but might receive undefined.
Suggested fix: Only call isValidInputLength after verifying the field has a value:
const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_WORKSPACE_COMPANY_CARD_NAME_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_WORKSPACE_COMPANY_CARD_NAME_FORM> => {
const errors = getFieldRequiredErrors(values, [INPUT_IDS.NAME], translate);
if (values.name) {
const {isValid, byteLength} = isValidInputLength(values.name, CONST.STANDARD_LENGTH_LIMIT);
if (!isValid) {
addErrorMessage(errors, INPUT_IDS.NAME, translate('common.error.characterLimitExceedCounter', byteLength, CONST.STANDARD_LENGTH_LIMIT));
}
}
return errors;
};Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
| @@ -25,9 +25,9 @@ function CardNameStep() { | |||
|
|
|||
| const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.ADD_NEW_CARD_FEED_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.ADD_NEW_CARD_FEED_FORM> => { | |||
| const errors = getFieldRequiredErrors(values, [INPUT_IDS.CARD_TITLE], translate); | |||
There was a problem hiding this comment.
❌ CONSISTENCY-6 (docs)
Reasoning: The code calls isValidInputLength(values.cardTitle, ...) without first checking if values.cardTitle exists. If the form field is undefined or empty, this could cause a runtime error since isValidInputLength expects a string parameter but might receive undefined.
Suggested fix: Only call isValidInputLength after verifying the field has a value:
const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.ADD_NEW_CARD_FEED_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.ADD_NEW_CARD_FEED_FORM> => {
const errors = getFieldRequiredErrors(values, [INPUT_IDS.CARD_TITLE], translate);
if (values.cardTitle) {
const {isValid, byteLength} = isValidInputLength(values.cardTitle, CONST.STANDARD_LENGTH_LIMIT);
if (!isValid) {
addErrorMessage(errors, INPUT_IDS.CARD_TITLE, translate('common.error.characterLimitExceedCounter', byteLength, CONST.STANDARD_LENGTH_LIMIT));
}
}
return errors;
};Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
| @@ -46,10 +46,10 @@ function CardNameStep({route}: CardNameStepProps) { | |||
|
|
|||
| const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_WORKSPACE_COMPANY_CARD_NAME_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_WORKSPACE_COMPANY_CARD_NAME_FORM> => { | |||
| const errors = getFieldRequiredErrors(values, [INPUT_IDS.NAME], translate); | |||
There was a problem hiding this comment.
❌ CONSISTENCY-6 (docs)
Reasoning: The code calls isValidInputLength(values.name, ...) without first checking if values.name exists. If the form field is undefined or empty, this could cause a runtime error since isValidInputLength expects a string parameter but might receive undefined.
Suggested fix: Only call isValidInputLength after verifying the field has a value:
const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_WORKSPACE_COMPANY_CARD_NAME_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_WORKSPACE_COMPANY_CARD_NAME_FORM> => {
const errors = getFieldRequiredErrors(values, [INPUT_IDS.NAME], translate);
if (values.name) {
const {isValid, byteLength} = isValidInputLength(values.name, CONST.STANDARD_LENGTH_LIMIT);
if (!isValid) {
addErrorMessage(errors, INPUT_IDS.NAME, translate('common.error.characterLimitExceedCounter', byteLength, CONST.STANDARD_LENGTH_LIMIT));
}
}
return errors;
};Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
| @@ -54,9 +54,9 @@ function WorkspaceEditCardNamePage({route}: WorkspaceEditCardNamePageProps) { | |||
|
|
|||
| const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_EXPENSIFY_CARD_NAME_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_EXPENSIFY_CARD_NAME_FORM> => { | |||
| const errors = getFieldRequiredErrors(values, [INPUT_IDS.NAME], translate); | |||
There was a problem hiding this comment.
❌ CONSISTENCY-6 (docs)
Reasoning: The code calls isValidInputLength(values.name, ...) without first checking if values.name exists. If the form field is undefined or empty, this could cause a runtime error since isValidInputLength expects a string parameter but might receive undefined.
Suggested fix: Only call isValidInputLength after verifying the field has a value:
const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_EXPENSIFY_CARD_NAME_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_EXPENSIFY_CARD_NAME_FORM> => {
const errors = getFieldRequiredErrors(values, [INPUT_IDS.NAME], translate);
if (values.name) {
const {isValid, byteLength} = isValidInputLength(values.name, CONST.STANDARD_LENGTH_LIMIT);
if (!isValid) {
addErrorMessage(errors, INPUT_IDS.NAME, translate('common.error.characterLimitExceedCounter', byteLength, CONST.STANDARD_LENGTH_LIMIT));
}
}
return errors;
};Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
| @@ -47,9 +47,9 @@ function CardNameStep({policyID, stepNames, startStepIndex}: CardNameStepProps) | |||
|
|
|||
| const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM> => { | |||
| const errors = getFieldRequiredErrors(values, [INPUT_IDS.CARD_TITLE], translate); | |||
There was a problem hiding this comment.
❌ CONSISTENCY-6 (docs)
Reasoning: The code calls isValidInputLength(values.cardTitle, ...) without first checking if values.cardTitle exists. If the form field is undefined or empty, this could cause a runtime error since isValidInputLength expects a string parameter but might receive undefined.
Suggested fix: Only call isValidInputLength after verifying the field has a value:
const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM> => {
const errors = getFieldRequiredErrors(values, [INPUT_IDS.CARD_TITLE], translate);
if (values.cardTitle) {
const {isValid, byteLength} = isValidInputLength(values.cardTitle, CONST.STANDARD_LENGTH_LIMIT);
if (!isValid) {
addErrorMessage(errors, INPUT_IDS.CARD_TITLE, translate('common.error.characterLimitExceedCounter', byteLength, CONST.STANDARD_LENGTH_LIMIT));
}
}
return errors;
};Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
|
@MelvinBot wanna take a shot at polishing this PR? |
Wrap isValidInputLength calls in a truthy check on the form value to avoid calling it on empty/undefined values, matching the defensive pattern used in TextBase.tsx and AddMerchantToMatchPage.tsx. Co-authored-by: Carlos Miceli <carlosmiceli@users.noreply.github.com>
|
🤖 Polished this PR with the following changes: Code fix — added null guards (7488eb8): PR description updated:
CI failures are unrelated: |
|
@MelvinBot can you merge main? |
…-getCommentLength Co-authored-by: Carlos Miceli <carlosmiceli@users.noreply.github.com>
|
🤖 Merged |
|
@hungvu193 ok, failing tests are unrelated, wanna give this a look? |
Sure |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppScreen.Recording.2026-02-10.at.10.05.02.movAndroid: mWeb ChromeScreen.Recording.2026-02-10.at.10.21.46.moviOS: HybridAppScreen.Recording.2026-02-10.at.09.47.30.moviOS: mWeb SafariScreen.Recording.2026-02-10.at.09.40.21.movMacOS: Chrome / SafariScreen.Recording.2026-02-10.at.09.27.31.mov |
|
@MelvinBot merge main again please. |
|
🤖 Merged |
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
|
🚧 @carlosmiceli has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Deployed to staging by https://github.com/carlosmiceli in version: 9.3.17-0 🚀
|
|
Hi @carlosmiceli. The app allows only 100 characters, not 256. 
Screenrecorder-2026-02-11-15-55-41-906.mp4 |
|
@IuliiaHerets could you link me to that test steps? |
|
@carlosmiceli, step 7 of the PR states that a card name can be up to 256 characters, but currently only up to 100 are accepted. Are we understanding this step correctly? 
|
|
I think those test steps were AI generated, and you can skip the 256 characters validation. Do you confirm @carlosmiceli? |
|
@IuliiaHerets yeah, those test steps were wrong, just updated them, sorry for the confusion! |
|
🚀 Deployed to production by https://github.com/lakchote in version: 9.3.17-9 🚀
|
|
@carlosmiceli this PR is failing with #82487 |
8 participants
Explanation of Change
Card name validation was using JavaScript's
String.lengthto check againstCONST.STANDARD_LENGTH_LIMIT(256). However, the backend uses PHP'sstrlen, which counts UTF-8 bytes rather than characters. Multi-byte characters (Sanskrit, emoji, CJK, etc.) have a higher byte count than character count, so the frontend allowed names the backend would reject with "402 Missing cardName".This PR switches all 6 card name validation sites to use
isValidInputLength(backed byStringUtils.getUTF8ByteLengthviaTextEncoder), which correctly counts UTF-8 bytes to match the backend's byte-based limit. A null guard is also added to avoid callingisValidInputLengthon empty/undefined values, matching the defensive pattern used elsewhere in the codebase (e.g.TextBase.tsx,AddMerchantToMatchPage.tsx).Fixed Issues
$ #81787
PROPOSAL:
Tests
Offline tests
N/A - This is a client-side validation change that does not depend on network state.
QA Steps
महामन्त्रस्य, वशिन्यादि वाग्देवता ऋषयः, अनुष्टुप् छन्दः, श्री ललिता पराभट्टारिका महा त्रिपुर सुन्दरPR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari