Added limit exceed error message with new limit

src/CONST.ts

@@ -1488,7 +1488,10 @@ const CONST = {
     FORM_CHARACTER_LIMIT: 50,
     LEGAL_NAMES_CHARACTER_LIMIT: 150,
     LOGIN_CHARACTER_LIMIT: 254,
-    WORKSPACE_NAME_CHARACTER_LIMIT: 80,
+
+    TITLE_CHARACTER_LIMIT: 100,
+    SUPPORTING_CHARACTER_LIMIT: 500,
+
     AVATAR_CROP_MODAL: {
         // The next two constants control what is min and max value of the image crop scale.
         // Values define in how many times the image can be bigger than its container.

src/languages/en.ts

@@ -1600,7 +1600,6 @@ export default {
             nameInputLabel: 'Name',
             nameInputHelpText: 'This is the name you will see on your workspace.',
             nameIsRequiredError: 'You need to define a name for your workspace.',
-            nameIsTooLongError: `Your workspace name can be at most ${CONST.WORKSPACE_NAME_CHARACTER_LIMIT} characters long.`,
             currencyInputLabel: 'Default currency',
             currencyInputHelpText: 'All expenses on this workspace will be converted to this currency.',
             currencyInputDisabledText: "The default currency can't be changed because this workspace is linked to a USD bank account.",

src/languages/es.ts

@@ -1624,7 +1624,6 @@ export default {
             nameInputLabel: 'Nombre',
             nameInputHelpText: 'Este es el nombre que verás en tu espacio de trabajo.',
             nameIsRequiredError: 'Debes definir un nombre para tu espacio de trabajo.',
-            nameIsTooLongError: `El nombre de su espacio de trabajo no puede tener más de ${CONST.WORKSPACE_NAME_CHARACTER_LIMIT} caracteres.`,
             currencyInputLabel: 'Moneda por defecto',
             currencyInputHelpText: 'Todas los gastos en este espacio de trabajo serán convertidos a esta moneda.',
             currencyInputDisabledText: 'La moneda predeterminada no se puede cambiar porque este espacio de trabajo está vinculado a una cuenta bancaria en USD.',

src/pages/EditRequestDescriptionPage.js

@@ -10,6 +10,7 @@ import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
+import * as ErrorUtils from '@libs/ErrorUtils';
 import updateMultilineInputRange from '@libs/updateMultilineInputRange';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -28,6 +29,21 @@ function EditRequestDescriptionPage({defaultDescription, onSubmit}) {
     const descriptionInputRef = useRef(null);
     const focusTimeoutRef = useRef(null);
 
+    /**
+     * @param {Object} values
+     * @param {String} values.title
+     * @returns {Object} - An object containing the errors for each inputID
+     */
+    const validate = useCallback((values) => {
+        const errors = {};
+
+        if (values.comment.length > CONST.SUPPORTING_CHARACTER_LIMIT) {
+            ErrorUtils.addErrorMessage(errors, 'comment', ['common.error.characterLimitExceedCounter', {length: values.comment.length, limit: CONST.SUPPORTING_CHARACTER_LIMIT}]);
+        }
+
+        return errors;
+    }, []);
+
     useFocusEffect(
         useCallback(() => {
             focusTimeoutRef.current = setTimeout(() => {
@@ -55,6 +71,7 @@ function EditRequestDescriptionPage({defaultDescription, onSubmit}) {
                 style={[styles.flexGrow1, styles.ph5]}
                 formID={ONYXKEYS.FORMS.MONEY_REQUEST_DESCRIPTION_FORM}
                 onSubmit={onSubmit}
+                validate={validate}
                 submitButtonText={translate('common.save')}
                 enabledWhenOffline
             >

src/pages/ReportWelcomeMessagePage.js

@@ -14,6 +14,7 @@ import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
+import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import updateMultilineInputRange from '@libs/updateMultilineInputRange';
@@ -56,6 +57,24 @@ function ReportWelcomeMessagePage(props) {
         setWelcomeMessage(value);
     }, []);
 
+    /**
+     * @param {Object} values
+     * @param {String} values.title
+     * @returns {Object} - An object containing the errors for each inputID
+     */
+    const validate = useCallback((values) => {
+        const errors = {};
+
+        if (values.welcomeMessage.length > CONST.SUPPORTING_CHARACTER_LIMIT) {
+            ErrorUtils.addErrorMessage(errors, 'welcomeMessage', [
+                'common.error.characterLimitExceedCounter',
+                {length: values.welcomeMessage.length, limit: CONST.SUPPORTING_CHARACTER_LIMIT},
+            ]);
+        }
+
+        return errors;
+    }, []);
+
     const submitForm = useCallback(() => {
         Report.updateWelcomeMessage(props.report.reportID, props.report.welcomeMessage, welcomeMessage.trim());
     }, [props.report.reportID, props.report.welcomeMessage, welcomeMessage]);
@@ -91,6 +110,7 @@ function ReportWelcomeMessagePage(props) {
                     style={[styles.flexGrow1, styles.ph5]}
                     formID={ONYXKEYS.FORMS.WELCOME_MESSAGE_FORM}
                     onSubmit={submitForm}
+                    validate={validate}
                     submitButtonText={props.translate('common.save')}
                     enabledWhenOffline
                 >

src/pages/iou/MoneyRequestDescriptionPage.js

@@ -14,6 +14,7 @@ import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as IOU from '@libs/actions/IOU';
 import * as Browser from '@libs/Browser';
+import * as ErrorUtils from '@libs/ErrorUtils';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import updateMultilineInputRange from '@libs/updateMultilineInputRange';
@@ -95,6 +96,24 @@ function MoneyRequestDescriptionPage({iou, route, selectedTab}) {
         Navigation.goBack(ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(iouType, reportID));
     }
 
+    /**
+     * @param {Object} values
+     * @param {String} values.title
+     * @returns {Object} - An object containing the errors for each inputID
+     */
+    const validate = useCallback((values) => {
+        const errors = {};
+
+        if (values.moneyRequestComment.length > CONST.SUPPORTING_CHARACTER_LIMIT) {
+            ErrorUtils.addErrorMessage(errors, 'moneyRequestComment', [
+                'common.error.characterLimitExceedCounter',
+                {length: values.moneyRequestComment.length, limit: CONST.SUPPORTING_CHARACTER_LIMIT},
+            ]);
+        }
+
+        return errors;
+    }, []);
+
     /**
      * Sets the money request comment by saving it to Onyx.
      *
@@ -121,6 +140,7 @@ function MoneyRequestDescriptionPage({iou, route, selectedTab}) {
                     style={[styles.flexGrow1, styles.ph5]}
                     formID={ONYXKEYS.FORMS.MONEY_REQUEST_DESCRIPTION_FORM}
                     onSubmit={(value) => updateComment(value)}
+                    validate={validate}
                     submitButtonText={translate('common.save')}
                     enabledWhenOffline
                 >

src/pages/iou/request/step/IOURequestStepDescription.js

@@ -10,6 +10,7 @@ import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
+import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import updateMultilineInputRange from '@libs/updateMultilineInputRange';
 import * as IOU from '@userActions/IOU';
@@ -61,6 +62,24 @@ function IOURequestStepDescription({
         }, []),
     );
 
+    /**
+     * @param {Object} values
+     * @param {String} values.title
+     * @returns {Object} - An object containing the errors for each inputID
+     */
+    const validate = useCallback((values) => {
+        const errors = {};
+
+        if (values.moneyRequestComment.length > CONST.SUPPORTING_CHARACTER_LIMIT) {
+            ErrorUtils.addErrorMessage(errors, 'moneyRequestComment', [
+                'common.error.characterLimitExceedCounter',
+                {length: values.moneyRequestComment.length, limit: CONST.SUPPORTING_CHARACTER_LIMIT},
+            ]);
+        }
+
+        return errors;
+    }, []);
+
     const navigateBack = () => {
         Navigation.goBack(backTo || ROUTES.HOME);
     };
@@ -85,6 +104,7 @@ function IOURequestStepDescription({
                 style={[styles.flexGrow1, styles.ph5]}
                 formID={ONYXKEYS.FORMS.MONEY_REQUEST_DESCRIPTION_FORM}
                 onSubmit={updateComment}
+                validate={validate}
                 submitButtonText={translate('common.save')}
                 enabledWhenOffline
             >

src/pages/settings/Report/RoomNamePage.js

@@ -69,6 +69,8 @@ function RoomNamePage({policy, report, reports, translate}) {
             } else if (ValidationUtils.isExistingRoomName(values.roomName, reports, report.policyID)) {
                 // The room name can't be set to one that already exists on the policy
                 ErrorUtils.addErrorMessage(errors, 'roomName', 'newRoomPage.roomAlreadyExistsError');
+            } else if (values.roomName.length > CONST.TITLE_CHARACTER_LIMIT) {
+                ErrorUtils.addErrorMessage(errors, 'roomName', ['common.error.characterLimitExceedCounter', {length: values.roomName.length, limit: CONST.TITLE_CHARACTER_LIMIT}]);
             }
 
             return errors;

src/pages/tasks/NewTaskDescriptionPage.js

@@ -13,6 +13,7 @@ import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
+import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import updateMultilineInputRange from '@libs/updateMultilineInputRange';
 import * as Task from '@userActions/Task';
@@ -47,6 +48,23 @@ function NewTaskDescriptionPage(props) {
         Navigation.goBack(ROUTES.NEW_TASK);
     };
 
+    /**
+     * @param {Object} values - form input values passed by the Form component
+     * @returns {Boolean}
+     */
+    function validate(values) {
+        const errors = {};
+
+        if (values.taskDescription.length > CONST.SUPPORTING_CHARACTER_LIMIT) {
+            ErrorUtils.addErrorMessage(errors, 'taskDescription', [
+                'common.error.characterLimitExceedCounter',
+                {length: values.taskDescription.length, limit: CONST.SUPPORTING_CHARACTER_LIMIT},
+            ]);
+        }
+
+        return errors;
+    }
+
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -63,6 +81,7 @@ function NewTaskDescriptionPage(props) {
                     formID={ONYXKEYS.FORMS.NEW_TASK_FORM}
                     submitButtonText={props.translate('common.next')}
                     style={[styles.mh5, styles.flexGrow1]}
+                    validate={(values) => validate(values)}
                     onSubmit={(values) => onSubmit(values)}
                     enabledWhenOffline
                 >

src/pages/tasks/NewTaskDetailsPage.js

@@ -58,6 +58,13 @@ function NewTaskDetailsPage(props) {
         if (!values.taskTitle) {
             // We error if the user doesn't enter a task name
             ErrorUtils.addErrorMessage(errors, 'taskTitle', 'newTaskPage.pleaseEnterTaskName');
+        } else if (values.taskTitle.length > CONST.TITLE_CHARACTER_LIMIT) {
+            ErrorUtils.addErrorMessage(errors, 'taskTitle', ['common.error.characterLimitExceedCounter', {length: values.taskTitle.length, limit: CONST.TITLE_CHARACTER_LIMIT}]);
+        } else if (values.taskDescription.length > CONST.SUPPORTING_CHARACTER_LIMIT) {
+            ErrorUtils.addErrorMessage(errors, 'taskDescription', [
+                'common.error.characterLimitExceedCounter',
+                {length: values.taskDescription.length, limit: CONST.SUPPORTING_CHARACTER_LIMIT},
+            ]);
         }
 
         return errors;

src/pages/tasks/NewTaskTitlePage.js

@@ -48,6 +48,8 @@ function NewTaskTitlePage(props) {
         if (!values.taskTitle) {
             // We error if the user doesn't enter a task name
             ErrorUtils.addErrorMessage(errors, 'taskTitle', 'newTaskPage.pleaseEnterTaskName');
+        } else if (values.taskTitle.length > CONST.TITLE_CHARACTER_LIMIT) {
+            ErrorUtils.addErrorMessage(errors, 'taskTitle', ['common.error.characterLimitExceedCounter', {length: values.taskTitle.length, limit: CONST.TITLE_CHARACTER_LIMIT}]);
         }
 
         return errors;

src/pages/tasks/TaskDescriptionPage.js

@@ -17,6 +17,7 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
+import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import StringUtils from '@libs/StringUtils';
@@ -49,7 +50,20 @@ const defaultProps = {
 const parser = new ExpensiMark();
 function TaskDescriptionPage(props) {
     const styles = useThemeStyles();
-    const validate = useCallback(() => ({}), []);
+
+    /**
+     * @param {Object} values - form input values passed by the Form component
+     * @returns {Boolean}
+     */
+    const validate = useCallback((values) => {
+        const errors = {};
+
+        if (values.description.length > CONST.SUPPORTING_CHARACTER_LIMIT) {
+            ErrorUtils.addErrorMessage(errors, 'description', ['common.error.characterLimitExceedCounter', {length: values.description.length, limit: CONST.SUPPORTING_CHARACTER_LIMIT}]);
+        }
+
+        return errors;
+    }, []);
 
     const submit = useCallback(
         (values) => {

src/pages/tasks/TaskTitlePage.js

@@ -14,6 +14,7 @@ import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalD
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
+import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import withReportOrNotFound from '@pages/home/report/withReportOrNotFound';
@@ -53,6 +54,8 @@ function TaskTitlePage(props) {
 
         if (_.isEmpty(values.title)) {
             errors.title = 'newTaskPage.pleaseEnterTaskName';
+        } else if (values.title.length > CONST.TITLE_CHARACTER_LIMIT) {
+            ErrorUtils.addErrorMessage(errors, 'title', ['common.error.characterLimitExceedCounter', {length: values.title.length, limit: CONST.TITLE_CHARACTER_LIMIT}]);
         }
 
         return errors;

src/pages/workspace/WorkspaceNewRoomPage.js

@@ -183,6 +183,8 @@ function WorkspaceNewRoomPage(props) {
             } else if (ValidationUtils.isExistingRoomName(values.roomName, props.reports, values.policyID)) {
                 // Certain names are reserved for default rooms and should not be used for policy rooms.
                 ErrorUtils.addErrorMessage(errors, 'roomName', 'newRoomPage.roomAlreadyExistsError');
+            } else if (values.roomName.length > CONST.TITLE_CHARACTER_LIMIT) {
+                ErrorUtils.addErrorMessage(errors, 'roomName', ['common.error.characterLimitExceedCounter', {length: values.roomName.length, limit: CONST.TITLE_CHARACTER_LIMIT}]);
             }
 
             if (!values.policyID) {

src/pages/workspace/WorkspaceSettingsPage.js

@@ -18,6 +18,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withW
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
+import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
@@ -81,10 +82,10 @@ function WorkspaceSettingsPage({policy, currencyList, windowWidth, route}) {
 
         if (!ValidationUtils.isRequiredFulfilled(name)) {
             errors.name = 'workspace.editor.nameIsRequiredError';
-        } else if ([...name].length > CONST.WORKSPACE_NAME_CHARACTER_LIMIT) {
+        } else if ([...name].length > CONST.TITLE_CHARACTER_LIMIT) {
             // Uses the spread syntax to count the number of Unicode code points instead of the number of UTF-16
             // code units.
-            errors.name = 'workspace.editor.nameIsTooLongError';
+            ErrorUtils.addErrorMessage(errors, 'name', ['common.error.characterLimitExceedCounter', {length: [...name].length, limit: CONST.TITLE_CHARACTER_LIMIT}]);
         }
 
         return errors;
@@ -148,7 +149,6 @@ function WorkspaceSettingsPage({policy, currencyList, windowWidth, route}) {
                             label={translate('workspace.editor.nameInputLabel')}
                             accessibilityLabel={translate('workspace.editor.nameInputLabel')}
                             defaultValue={policy.name}
-                            maxLength={CONST.WORKSPACE_NAME_CHARACTER_LIMIT}
                             containerStyles={[styles.mt4]}
                             spellCheck={false}
                         />