diff --git a/src/pages/workspace/companyCards/addNew/CardNameStep.tsx b/src/pages/workspace/companyCards/addNew/CardNameStep.tsx index c1fd28accef6..4cd5fe26d37a 100644 --- a/src/pages/workspace/companyCards/addNew/CardNameStep.tsx +++ b/src/pages/workspace/companyCards/addNew/CardNameStep.tsx @@ -10,6 +10,7 @@ import TextInput from '@components/TextInput'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as ErrorUtils from '@libs/ErrorUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; import * as CompanyCards from '@userActions/CompanyCards'; import CONST from '@src/CONST'; @@ -23,7 +24,12 @@ function CardNameStep() { const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD); const validate = (values: FormOnyxValues): FormInputErrors => { - return ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.CARD_TITLE]); + const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.CARD_TITLE]); + const length = values.cardTitle.length; + if (length > CONST.STANDARD_LENGTH_LIMIT) { + ErrorUtils.addErrorMessage(errors, INPUT_IDS.CARD_TITLE, translate('common.error.characterLimitExceedCounter', {length, limit: CONST.STANDARD_LENGTH_LIMIT})); + } + return errors; }; const submit = (values: FormOnyxValues) => { @@ -67,7 +73,6 @@ function CardNameStep() { role={CONST.ROLE.PRESENTATION} defaultValue={addNewCard?.data?.bankName} containerStyles={[styles.mb6]} - maxLength={CONST.STANDARD_LENGTH_LIMIT} ref={inputCallbackRef} /> diff --git a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx index 26ae497406d6..d21a819540fa 100644 --- a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx @@ -9,6 +9,7 @@ import TextInput from '@components/TextInput'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as ErrorUtils from '@libs/ErrorUtils'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; import * as Card from '@userActions/Card'; @@ -28,16 +29,14 @@ function CardNameStep() { const userName = PersonalDetailsUtils.getUserNameByEmail(data?.assigneeEmail ?? '', 'firstName'); const defaultCardTitle = data?.cardType !== CONST.EXPENSIFY_CARD.CARD_TYPE.VIRTUAL ? `${userName}'s Card` : ''; - const validate = useCallback( - (values: FormOnyxValues): FormInputErrors => { - const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.CARD_TITLE]); - if (!values.cardTitle) { - errors.cardTitle = translate('common.error.fieldRequired'); - } - return errors; - }, - [translate], - ); + const validate = (values: FormOnyxValues): FormInputErrors => { + const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.CARD_TITLE]); + const length = values.cardTitle.length; + if (length > CONST.STANDARD_LENGTH_LIMIT) { + ErrorUtils.addErrorMessage(errors, INPUT_IDS.CARD_TITLE, translate('common.error.characterLimitExceedCounter', {length, limit: CONST.STANDARD_LENGTH_LIMIT})); + } + return errors; + }; const submit = useCallback((values: FormOnyxValues) => { Card.setIssueNewCardStepAndData({