Merge branch 'master' into Timebox-9

src/pages/Organization/DetailPage/OrganizationCard.js

@@ -48,15 +48,24 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
         return <Typography variant="errorMessage1">{errorMsg}</Typography>
     }
 
+    function getMaxErrStr(num, fieldname){
+        return displayErrorMsg(intl.formatMessage({ id: 'noMoreThenNWords' },{num:num, fieldname:fieldname?intl.formatMessage({ id: fieldname})+": ":""}));
+    }
+
+    function getRequiredErrStr(fieldname){
+        return displayErrorMsg(intl.formatMessage({ id: 'require'},{fieldname:fieldname?intl.formatMessage({ id: fieldname}):""}));
+    }
+
     const formik = useFormik({
         enableReinitialize: true,
         initialValues: currentUserData,
         validationSchema: yup.object().shape({
-            enCompanyName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireEnglishName' }))),
+            enCompanyName: yup.string().max(255, getMaxErrStr(255)).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireEnglishName' }))),
             chCompanyName: yup.string().max(255, displayErrorMsg(intl.formatMessage({ id: 'userRequireChineseName' }))).nullable(),
-            addressLine1: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine1' }))),
-            addressLine2: yup.string().max(40, displayErrorMsg(intl.formatMessage({ id: 'noMoreThen40Words' }))),
-            addressLine3: yup.string().max(40, displayErrorMsg(intl.formatMessage({ id: 'noMoreThen40Words' }))),
+            addressLine1: yup.string().max(40, getMaxErrStr(40)).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine1' }))),
+            addressLine2: yup.string().max(40, getMaxErrStr(40)),
+            addressLine3: yup.string().max(40, getMaxErrStr(40)),
+            contactPerson: yup.string().max(60, getMaxErrStr(60)).required(getRequiredErrStr("contactPerson")),
             fax_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({ id: 'requireDialingCode' }))).nullable(),
             tel_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({ id: 'requireDialingCode' }))),
             phoneNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'requiredValidNumber' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireContactNumber' }))),

src/pages/Proof/Reply_GLD/index.js

@@ -60,7 +60,7 @@ const Index = () => {
                     if (!responseData.data?.id) {
                         navigate("/proof/search");
                     }
-                    setShowProofBtn(responseData.data.action != null && responseData.data.action===true);
+                    setShowProofBtn(responseData.data.action != null && responseData.data.action === true);
                     responseData.data["phoneNumber"] = JSON.parse(responseData.data.contactTelNo).phoneNumber;
                     responseData.data["tel_countryCode"] = JSON.parse(responseData.data.contactTelNo).countryCode;
 
@@ -81,7 +81,7 @@ const Index = () => {
                     setIsOverTime(current.getTime() > proofPaymentDeadline.getTime());
                     setShowCancelBtn(responseData.data.cancelled || responseData.data.replyDate || current.getTime() > proofPaymentDeadline.getTime())
 
-                    
+
 
                     setRecord(responseData.data);
                 }
@@ -122,10 +122,8 @@ const Index = () => {
                 <Grid container sx={{ minHeight: '110vh', backgroundColor: 'backgroundColor.default' }} direction="column" justifyContent="flex-start" alignItems="center" >
                     <Grid item xs={12} width="100%">
                         <div style={BackgroundHead} width="100%">
-                            <Stack direction="row" height='70px'>
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
-                                    Proof Record
-                                </Typography>
+                            <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                                <Typography ml={15} color='#FFF' variant="h4">Proof Record</Typography>
                             </Stack>
                         </div>
                     </Grid>

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -53,6 +53,10 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
     //     loadedData.careOf = loadedData.contactPerson
     // },[]);
 
+    function getMaxErrStr(num, fieldname){
+        return intl.formatMessage({ id: 'noMoreThenNWords' },{num:num, fieldname:fieldname?intl.formatMessage({ id: fieldname})+": ":""});
+    }
+
     const formik = useFormik({
         enableReinitialize: true,
         initialValues: loadedData,
@@ -62,7 +66,8 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
             fax_countryCode: yup.string().min(3, intl.formatMessage({id: 'require3Number'})),
             phoneNumber: yup.string().min(8, intl.formatMessage({id: 'require8Number'})).required(intl.formatMessage({id: 'requireContactNumber'})),
             faxNumber: yup.string().min(8, intl.formatMessage({id: 'require8Number'})),
-            remarks: yup.string().max(255,intl.formatMessage({id: 'noMoreThen255Words'})).nullable(),
+            remarks: yup.string().max(100,getMaxErrStr(100)).nullable(),
+            careOf: yup.string().max(30,getMaxErrStr(30)).nullable(),
         }),
         onSubmit: values => {
             if (!values.issueId) {

src/pages/PublicNotice/Details_GLD/ClientDetailCard.js

@@ -154,7 +154,7 @@ const ClientDetailCard = (
                                     size="small"
                                     {...register("type",
                                         {
-                                            value: currentApplicationDetailData.type,
+                                            value: currentApplicationDetailData.type == "ORG" ? "Organisation":"Individual",
                                         })}
                                     id='type'
                                     sx={{

src/pages/PublicNotice/Details_GLD/StatusChangeDialog.js

@@ -88,22 +88,25 @@ const StatusChangeDialog = (props) => {
 
   const getNotAcceptedContent = () => {
     setContent(<Grid container direction="row" justifyContent="center" alignItems="center">
-      <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, }}>
+      <Grid item xs={12} md={12} lg={12}>
+
         <TextField
-          fullWidth
           multiline
-          row={10}
-          minRows={4}
-          maxRows={4}
-          inputProps={{ maxLength: 255 }}
+          fullWidth
+          rows={6}
           placeholder="Please enter reason"
           helperText={helperText}
           onChange={(newValues) => {
             setRemarks(newValues.target.value);
             setHelperText("");
           }}
-        >
-        </TextField>
+          variant="outlined"
+          InputProps={
+            {
+              style: { minHeight: '42.5px', maxHeight: '50vh', height: 'auto' },
+            }
+          }
+        />
       </Grid>
     </Grid>
     );
@@ -119,7 +122,7 @@ const StatusChangeDialog = (props) => {
           </Grid>
           <Grid item xs={12} md={9} lg={9}>
             <FormLabel>
-            <Typography variant="h5">{props.gazetteIssue + ", "}{props.issueNum + ", "}{props.issueDate}</Typography>
+              <Typography variant="h5">{props.gazetteIssue + ", "}{props.issueNum + ", "}{props.issueDate}</Typography>
             </FormLabel>
           </Grid>
         </Grid>

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -37,10 +37,10 @@ import {
 import CloseIcon from '@mui/icons-material/Close';
 import EditNoteIcon from '@mui/icons-material/EditNote';
 import DownloadIcon from '@mui/icons-material/Download';
-import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
-import {ThemeProvider} from "@emotion/react";
+import { PNSPS_BUTTON_THEME } from "../../../themes/buttonConst";
+import { ThemeProvider } from "@emotion/react";
 import * as React from "react";
-import {FormattedMessage, useIntl} from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ApplicationDetailCard = (
     { applicationDetailData,
@@ -146,40 +146,40 @@ const ApplicationDetailCard = (
                             mb={2}
                         >
                             <ThemeProvider theme={PNSPS_BUTTON_THEME}>
-                            {
-                                currentApplicationDetailData.status == "confirmed" ?
-                                    <Button
-                                        variant="contained"
-                                        color="create"
-                                        onClick={() => { checkExprityDate(true) }}
-                                        disabled={currentApplicationDetailData.status == "rejected"
-                                            || currentApplicationDetailData.status == "cancelled"
-                                            || currentApplicationDetailData.status == "paid"
-                                            || currentApplicationDetailData.creditor}
-                                        startIcon={<EditNoteIcon />}
-                                        aria-label={intl.formatMessage({id: 'payFor'})}
-                                    >
-                                        <FormattedMessage id="payFor"/>
-                                    </Button>
-                                    : null
-                            }
-                            <Button
-                                variant="contained"
-                                onClick={cancelledClick()}
-                                color="edit"
-                                disabled={currentApplicationDetailData.status !== "submitted"}
-                                title={intl.formatMessage({id: 'cancel'})}
-                                startIcon={<CloseIcon />}
-                                aria-label={intl.formatMessage({id: 'cancel'})}
-                            >
-                                <FormattedMessage id="cancel"/>
-                            </Button>
+                                {
+                                    currentApplicationDetailData.status == "confirmed" ?
+                                        <Button
+                                            variant="contained"
+                                            color="create"
+                                            onClick={() => { checkExprityDate(true) }}
+                                            disabled={currentApplicationDetailData.status == "rejected"
+                                                || currentApplicationDetailData.status == "cancelled"
+                                                || currentApplicationDetailData.status == "paid"
+                                                || currentApplicationDetailData.creditor}
+                                            startIcon={<EditNoteIcon />}
+                                            aria-label={intl.formatMessage({ id: 'payFor' })}
+                                        >
+                                            <FormattedMessage id="payFor" />
+                                        </Button>
+                                        : null
+                                }
+                                <Button
+                                    variant="contained"
+                                    onClick={cancelledClick()}
+                                    color="edit"
+                                    disabled={currentApplicationDetailData.status !== "submitted"}
+                                    title={intl.formatMessage({ id: 'cancel' })}
+                                    startIcon={<CloseIcon />}
+                                    aria-label={intl.formatMessage({ id: 'cancel' })}
+                                >
+                                    <FormattedMessage id="cancel" />
+                                </Button>
                             </ThemeProvider>
                         </Stack>
                     </Grid>
                 </Grid>
                 <Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}>
-                    <FormattedMessage id="publicNoticeDetailTitle"/>
+                    <FormattedMessage id="publicNoticeDetailTitle" />
                 </Typography>
                 <form>
                     <Grid container direction="column">
@@ -191,7 +191,7 @@ const ApplicationDetailCard = (
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="pnspsFormParagraph">
-                                                <FormattedMessage id="applicationId"/>:
+                                                <FormattedMessage id="applicationId" />:
                                             </Typography></FormLabel>
                                         </Grid>
 
@@ -221,36 +221,37 @@ const ApplicationDetailCard = (
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="pnspsFormParagraph">
-                                                <FormattedMessage id="applyStatus"/>:
+                                                <FormattedMessage id="applyStatus" />:
                                             </Typography></FormLabel>
                                         </Grid>
 
                                         <Grid item xs={12} md={4} lg={4}>
                                             <FormControl variant="outlined">
-                                                {currentApplicationDetailData.status? StatusUtils.getStatusByTextIntl(currentApplicationDetailData.status, false,intl) : ""}
+                                                {currentApplicationDetailData.status ? StatusUtils.getStatusByTextIntl(currentApplicationDetailData.status, false, intl) : ""}
                                             </FormControl>
                                         </Grid>
-                                        {
-                                            currentApplicationDetailData.reason ?
-                                                <Grid item xs={12} md={5} lg={5}>
-                                                    <Grid container alignItems={"center"}>
-                                                        <Stack direction="row" justifyContent="flex-start" alignItems="center">
-                                                            <Grid item xs={12} md={7} lg={7}>
-                                                                <FormLabel><Typography variant="pnspsFormParagraph">原因:</Typography></FormLabel>
-                                                            </Grid>
-                                                            <Grid item xs={12} md={5} lg={5}>
-                                                                <FormControl variant="outlined" fullWidth disabled>
-                                                                    <Typography id='reason' variant="pnspsFormParagraph">
-                                                                        {currentApplicationDetailData.reason}
-                                                                    </Typography>
-                                                                </FormControl>
-                                                            </Grid>
-                                                        </Stack>
+
+                                    </Grid>
+                                    {
+                                        currentApplicationDetailData.reason ?
+                                            <Grid item xs={12} md={12} lg={12}>
+                                                <Grid container alignItems={"center"} direction="row" >
+
+                                                    <Grid item xs={12} md={3} lg={3}>
+                                                        <FormLabel><Typography variant="pnspsFormParagraph"><FormattedMessage id="reason" />:</Typography></FormLabel>
                                                     </Grid>
+                                                    <Grid item xs={12} md={9} lg={9}>
+                                                        <FormLabel>
+                                                            <Typography id='reason' variant="pnspsFormParagraph">
+                                                                {currentApplicationDetailData.reason}
+                                                            </Typography>
+                                                        </FormLabel>
+                                                    </Grid>
+
                                                 </Grid>
-                                                : ""
-                                        }
-                                    </Grid>
+                                            </Grid>
+                                            : ""
+                                    }
                                 </Grid>
                             </Grid>
                             <Grid container direction="row" justifyContent="space-between"
@@ -260,7 +261,7 @@ const ApplicationDetailCard = (
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="pnspsFormParagraph">
-                                                <FormattedMessage id="applyPerson"/>:
+                                                <FormattedMessage id="applyPerson" />:
                                             </Typography></FormLabel>
                                         </Grid>
 
@@ -302,12 +303,12 @@ const ApplicationDetailCard = (
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1, ml: {lg:1} }}>
+                                <Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1, ml: { lg: 1 } }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="pnspsFormParagraph">
-                                                <FormattedMessage id="gazetteCount"/>:
+                                                <FormattedMessage id="gazetteCount" />:
                                             </Typography></FormLabel>
                                         </Grid>
 
@@ -341,7 +342,7 @@ const ApplicationDetailCard = (
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="pnspsFormParagraph">
-                                                <FormattedMessage id="contactPerson"/>:
+                                                <FormattedMessage id="contactPerson" />:
                                             </Typography></FormLabel>
                                         </Grid>
 
@@ -366,12 +367,12 @@ const ApplicationDetailCard = (
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1, ml: {lg:1} }}>
+                                <Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1, ml: { lg: 1 } }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="pnspsFormParagraph">
-                                                <FormattedMessage id="publishDate"/>:
+                                                <FormattedMessage id="publishDate" />:
                                             </Typography></FormLabel>
                                         </Grid>
 
@@ -406,7 +407,7 @@ const ApplicationDetailCard = (
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="pnspsFormParagraph">
-                                                <FormattedMessage id="userContactNumber"/>:
+                                                <FormattedMessage id="userContactNumber" />:
                                             </Typography></FormLabel>
                                         </Grid>
 
@@ -455,7 +456,7 @@ const ApplicationDetailCard = (
                                                 <Grid item xs={12} md={3} lg={3}
                                                     sx={{ display: 'flex', alignItems: 'center' }}>
                                                     <FormLabel><Typography variant="pnspsFormParagraph">
-                                                        <FormattedMessage id="currencyPrice"/>(HK$):
+                                                        <FormattedMessage id="currencyPrice" />(HK$):
                                                     </Typography></FormLabel>
                                                 </Grid>
 
@@ -474,7 +475,7 @@ const ApplicationDetailCard = (
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel><Typography variant="pnspsFormParagraph">
-                                            <FormattedMessage id="userFaxNumber"/>:
+                                            <FormattedMessage id="userFaxNumber" />:
                                         </Typography></FormLabel>
                                     </Grid>
 
@@ -525,12 +526,12 @@ const ApplicationDetailCard = (
                                                 <Grid item xs={12} sm={12} md={2.5} lg={1.6}
                                                     sx={{ display: 'flex', alignItems: 'center' }}>
                                                     <FormLabel><Typography variant="pnspsFormParagraph">
-                                                        <FormattedMessage id="draftFile"/>:
+                                                        <FormattedMessage id="draftFile" />:
                                                     </Typography></FormLabel>
                                                 </Grid>
                                                 <Grid item xs={12} sm={12} md={9} lg={9} >
                                                     <Grid container direction="row" alignItems="center" justifyContent="flex-start">
-                                                        <Grid item xs={12} sm={12} md={12} lg={12} sx={{ wordBreak: 'break-word' , }}>
+                                                        <Grid item xs={12} sm={12} md={12} lg={12} sx={{ wordBreak: 'break-word', }}>
                                                             <Typography
                                                                 fullWidth
                                                                 id='fileName'
@@ -540,15 +541,15 @@ const ApplicationDetailCard = (
                                                             </Typography>
                                                             <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                                 <Button
-                                                                    sx={{ml:3}}
+                                                                    sx={{ ml: 3 }}
                                                                     variant="contained"
                                                                     onClick={onDownloadClick()}
-                                                                    aria-label={intl.formatMessage({id: 'download'})}
-                                                                    title={intl.formatMessage({id: 'download'})}
+                                                                    aria-label={intl.formatMessage({ id: 'download' })}
+                                                                    title={intl.formatMessage({ id: 'download' })}
                                                                     color="save"
-                                                                    startIcon={<DownloadIcon sx={{alignItems:"center"}}/>}
+                                                                    startIcon={<DownloadIcon sx={{ alignItems: "center" }} />}
                                                                 >
-                                                                    <FormattedMessage id="download"/>
+                                                                    <FormattedMessage id="download" />
                                                                 </Button>
                                                             </ThemeProvider>
                                                         </Grid>
@@ -577,7 +578,7 @@ const ApplicationDetailCard = (
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel><Typography variant="pnspsFormParagraph">
-                                            <FormattedMessage id="extraMark"/>:
+                                            <FormattedMessage id="extraMark" />:
                                         </Typography></FormLabel>
                                     </Grid>
                                     <Grid item xs={12} md={9} lg={9}>
@@ -601,31 +602,31 @@ const ApplicationDetailCard = (
                         >
                             <DialogTitle>
                                 <Typography variant="h3" >
-                                    <FormattedMessage id="payConfirm"/>
+                                    <FormattedMessage id="payConfirm" />
                                 </Typography>
                             </DialogTitle>
                             <DialogContent style={{ display: 'flex', }}>
                                 <Stack direction="column" justifyContent="space-between">
                                     <Typography variant="h4">
-                                        <FormattedMessage id="totalAmount"/> (HK$): {FormatUtils.currencyFormat(fee)}
+                                        <FormattedMessage id="totalAmount" /> (HK$): {FormatUtils.currencyFormat(fee)}
                                     </Typography>
                                 </Stack>
                             </DialogContent>
                             <DialogActions>
                                 <Button
                                     onClick={() => setIsPopUp(false)}
-                                    aria-label={intl.formatMessage({id: 'close'})}
+                                    aria-label={intl.formatMessage({ id: 'close' })}
                                 >
                                     <Typography variant="pnspsFormParagraph">
-                                    <FormattedMessage id="close"/>
-                                </Typography></Button>
+                                        <FormattedMessage id="close" />
+                                    </Typography></Button>
                                 <Button
                                     onClick={() => doPayment()}
-                                    aria-label={intl.formatMessage({id: 'confirm'})}
+                                    aria-label={intl.formatMessage({ id: 'confirm' })}
                                 >
                                     <Typography variant="pnspsFormParagraph">
-                                    <FormattedMessage id="confirm"/>
-                                </Typography></Button>
+                                        <FormattedMessage id="confirm" />
+                                    </Typography></Button>
                             </DialogActions>
                         </Dialog>
                     </div>
@@ -653,10 +654,10 @@ const ApplicationDetailCard = (
                             <DialogActions>
                                 <Button
                                     onClick={() => setErrorPopUp(false)}
-                                    aria-label={intl.formatMessage({id: 'close'})}
+                                    aria-label={intl.formatMessage({ id: 'close' })}
                                 >
                                     <Typography variant="pnspsFormParagraph">
-                                        <FormattedMessage id="close"/>
+                                        <FormattedMessage id="close" />
                                     </Typography></Button>
                             </DialogActions>
                         </Dialog>

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js

@@ -40,23 +40,35 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
         }
     }, [currentUserData]);
 
+    
+    function getMaxErrStr(num, fieldname){
+        return intl.formatMessage({ id: 'noMoreThenNWords' },{num:num, fieldname:fieldname?intl.formatMessage({ id: fieldname})+": ":""});
+    }
+
+    function getRequiredErrStr(fieldname){
+        return intl.formatMessage({ id: 'require'},{fieldname:fieldname?intl.formatMessage({ id: fieldname}):""});
+    }
+
+
+
     const formik = useFormik({
         enableReinitialize: true,
         initialValues: currentUserData,
         validationSchema: yup.object().shape({
-            enName: yup.string().max(255).required(intl.formatMessage({id: 'userRequireEnglishName'})),
-            chName: yup.string().max(255).required(intl.formatMessage({id: 'userRequireChineseName'})),
-            addressLine1: yup.string().max(40).required(intl.formatMessage({id: 'validateAddressLine1'})),
-            addressLine2: yup.string().max(40).nullable(),
-            addressLine3: yup.string().max(40).nullable(),
+            enName: yup.string().max(40, getMaxErrStr(40)).required(intl.formatMessage({id: 'userRequireEnglishName'})),
+            chName: yup.string().max(6, getMaxErrStr(6)).required(intl.formatMessage({id: 'userRequireChineseName'})),
+            addressLine1: yup.string().max(40, getMaxErrStr(40)).required(intl.formatMessage({id: 'validateAddressLine1'})),
+            addressLine2: yup.string().max(40, getMaxErrStr(40)).nullable(),
+            addressLine3: yup.string().max(40, getMaxErrStr(40)).nullable(),
             emailAddress: yup.string().email(intl.formatMessage({id: 'validEmailFormat'})).max(255).required(intl.formatMessage({id: 'requireEmail'})),
             identification: yup.string().min(7, intl.formatMessage({id: 'requireIdDocNumber'})).required(intl.formatMessage({id: 'requireIdDocNumber'})),
-            checkDigit: yup.string().max(1).required(intl.formatMessage({id: 'requiredNumberInQuote'})).nullable(),
-            idDocType: yup.string().max(255).required(intl.formatMessage({id: 'requireIdDocType'})),
+            checkDigit: yup.string().max(1, getMaxErrStr(1)).required(intl.formatMessage({id: 'requiredNumberInQuote'})).nullable(),
+            idDocType: yup.string().max(255, getMaxErrStr(255)).required(intl.formatMessage({id: 'requireIdDocType'})),
             tel_countryCode: yup.string().min(3, intl.formatMessage({id: 'require3Number'})).required(intl.formatMessage({id: 'requireDialingCode'})),
             fax_countryCode: yup.string().min(3, intl.formatMessage({id: 'require3Number'})),
             phoneNumber: yup.string().min(8, intl.formatMessage({id: 'require8Number'})).required(intl.formatMessage({id: 'requireContactNumber'})),
             faxNumber: yup.string().min(8, intl.formatMessage({id: 'require8Number'})).nullable(),
+            district: yup.string().required(getRequiredErrStr("district")),
         }),
         onSubmit: values => {
             if (values.country==null){

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js

@@ -39,12 +39,22 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
         }
     }, [currentUserData]);
 
+    
+    function getMaxErrStr(num, fieldname){
+        return intl.formatMessage({ id: 'noMoreThenNWords' },{num:num, fieldname:fieldname?intl.formatMessage({ id: fieldname})+": ":""});
+    }
+
+    function getRequiredErrStr(fieldname){
+        return intl.formatMessage({ id: 'require'},{fieldname:fieldname?intl.formatMessage({ id: fieldname}):""});
+    }
+
+
     const formik = useFormik({
         enableReinitialize: true,
         initialValues: currentUserData,
         validationSchema: yup.object().shape({
-            enName: yup.string().max(255).required(intl.formatMessage({id: 'userRequireEnglishName'})),
-            chName: yup.string().max(255).required(intl.formatMessage({id: 'userRequireChineseName'})),
+            enName: yup.string().max(40, getMaxErrStr(40)).required(intl.formatMessage({id: 'userRequireEnglishName'})),
+            chName: yup.string().max(6, getMaxErrStr(6)).required(intl.formatMessage({id: 'userRequireChineseName'})),
             addressLine1: yup.string().max(40).required(intl.formatMessage({id: 'validateAddressLine1'})),
             addressLine2: yup.string().max(40).nullable(),
             addressLine3: yup.string().max(40).nullable(),
@@ -53,6 +63,7 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
             fax_countryCode: yup.string().min(3, intl.formatMessage({id: 'require3Number'})),
             phoneNumber: yup.string().min(8, intl.formatMessage({id: 'require8Number'})).required(intl.formatMessage({id: 'requireContactNumber'})),
             faxNumber: yup.string().min(8, intl.formatMessage({id: 'require8Number'})).nullable(),
+            district: yup.string().required(getRequiredErrStr("district")),
         }),
         onSubmit: values => {
             if (values.country==null){

src/pages/_Test/Mail/index.js

@@ -24,11 +24,15 @@ const Mail = () => {
     const [isResponsPopUp, setIsResponsPopUp] = React.useState(false);
     const [responsText, setResponsText] = React.useState("");
 
+    function getMaxErrStr(num, fieldname){
+        return intl.formatMessage({ id: 'noMoreThenNWords' },{num:num, fieldname:fieldname?intl.formatMessage({ id: fieldname})+": ":""});
+    }
+
     const formik = useFormik({
         enableReinitialize:true,
         initialValues:{email:""},
         validationSchema:yup.object().shape({
-            email: yup.string().max(255).required(intl.formatMessage({id: 'require'}) + 'e-Mail')
+            email: yup.string().max(128, getMaxErrStr(128)).required(intl.formatMessage({id: 'require'}) + 'e-Mail')
         }),
         onSubmit:values=>{
             console.log(values);

src/pages/authentication/ForgotUsername/AuthCallback/index.js

@@ -158,6 +158,11 @@ const Index = () => {
         // setLevel(strengthColorChi(temp));
     };
 
+    function getMaxErrStr(num, fieldname){
+        return intl.formatMessage({ id: 'noMoreThenNWords' },{num:num, fieldname:fieldname?intl.formatMessage({ id: fieldname})+": ":""});
+    }
+    
+
     const formik = useFormik({
         enableReinitialize: true,
         initialValues: {
@@ -170,6 +175,7 @@ const Index = () => {
             // emailVerifyHash: yup.string().required(intl.formatMessage({id: 'requireSecurityCode'})),
             // username: yup.string().required(intl.formatMessage({id: 'requireUsername'})),
             password: yup.string().min(8, intl.formatMessage({id: 'atLeast8CharPassword'}))
+            .max(60, getMaxErrStr(60))
             .required(intl.formatMessage({id: 'requirePassword'}))
             .matches(/^\S*$/, { message: (intl.formatMessage({id: 'noSpacePassword'}))})
             .matches(/^(?=.*[a-z])/, { message: intl.formatMessage({id: 'atLeastOneSmallLetter'})})
@@ -177,6 +183,7 @@ const Index = () => {
             .matches(/^(?=.*[0-9])/, { message: intl.formatMessage({id: 'atLeast1Number'})})
             .matches(/^(?=.*[!@#%&])/, { message: intl.formatMessage({id: 'atLeast1SpecialChar'})}),
             confirmPassword: yup.string().min(8, intl.formatMessage({id: 'atLeast8CharPassword'}))
+            .max(60, getMaxErrStr(60))
             .required(intl.formatMessage({id: 'pleaseConfirmPassword'}))
             .oneOf([yup.ref('password'), null], intl.formatMessage({id: 'samePassword'})),
         }),

src/pages/authentication/auth-forms/AuthLogin.js

@@ -105,6 +105,11 @@ const AuthLogin = () => {
   const onPasswordChange = (event) => {
      setUserPassword(event.target.value);
   }
+
+  function getMaxErrStr(num, fieldname){
+    return intl.formatMessage({ id: 'noMoreThenNWords' },{num:num, fieldname:fieldname?intl.formatMessage({ id: fieldname})+": ":""});
+}
+
   return (
     <>
       <Formik
@@ -114,8 +119,8 @@ const AuthLogin = () => {
           submit: null
         }}
         validationSchema={Yup.object().shape({
-          email: Yup.string().email('Must be a valid email').max(255).required('Email is required'),
-          password: Yup.string().max(255).required('Password is required')
+          email: Yup.string().max(128,getMaxErrStr(128)).email('Must be a valid email').required('Email is required'),
+          password: Yup.string().max(60, getMaxErrStr(60)).required('Password is required')
         })}
         onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
           try {

src/pages/authentication/auth-forms/AuthRegister.js

@@ -52,6 +52,11 @@ const AuthRegister = () => {
     changePassword('');
   }, []);
 
+  function getMaxErrStr(num, fieldname){
+    return intl.formatMessage({ id: 'noMoreThenNWords' },{num:num, fieldname:fieldname?intl.formatMessage({ id: fieldname})+": ":""});
+}
+
+
   return (
     <>
       <Formik
@@ -64,10 +69,10 @@ const AuthRegister = () => {
           submit: null
         }}
         validationSchema={Yup.object().shape({
-          firstname: Yup.string().max(255).required('First Name is required'),
-          lastname: Yup.string().max(255).required('Last Name is required'),
-          email: Yup.string().email('Must be a valid email').max(255).required('Email is required'),
-          password: Yup.string().max(255).required('Password is required')
+          firstname: Yup.string().max(30, getMaxErrStr(30)).required('First Name is required'),
+          lastname: Yup.string().max(30, getMaxErrStr(30)).required('Last Name is required'),
+          email: Yup.string().email('Must be a valid email').max(128, getMaxErrStr(128)).required('Email is required'),
+          password: Yup.string().max(60, getMaxErrStr(60)).required('Password is required')
         })}
         onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
           try {

src/pages/authentication/auth-forms/BusCustomFormWizard.js

@@ -100,6 +100,7 @@ const BusCustomFormWizard = (props) => {
     const email = document.getElementById("email-login")
     const [checkEmail, setCheckEmail] = useState(false)
     const [checkEmailBlur, setCheckEmailBlur] = useState(false)
+    const [districtErrStr, setDistrictErrStr] = useState("")
 
     const address4ComboList = ComboData.district;
     const address5ComboList = ComboData.country;
@@ -171,6 +172,22 @@ const BusCustomFormWizard = (props) => {
         }
     }, [checkEmailBlur])
 
+    useEffect(()=>{
+        setDistrictErrStr("");
+        if(selectedAddress5?.type === "hongKong"){
+            if(selectedAddress4 ==null || selectedAddress4 == ""|| selectedAddress4 == {})
+                setDistrictErrStr(getRequiredErrStr("district"))
+        }
+    },[selectedAddress4, selectedAddress5])
+
+    function getRequiredErrStr(fieldname){
+        return displayErrorMsg(intl.formatMessage({ id: 'require'},{fieldname:fieldname?intl.formatMessage({ id: fieldname}):""}));
+    }
+
+    function getMaxErrStr(num, fieldname){
+        return displayErrorMsg(intl.formatMessage({ id: 'noMoreThenNWords' },{num:num, fieldname:fieldname?intl.formatMessage({ id: fieldname})+": ":""}));
+    }
+
     const onCaptchaChange = () => {
         HttpUtils.post({
             url: POST_CAPTCHA,
@@ -497,17 +514,17 @@ const BusCustomFormWizard = (props) => {
         }),
 
         validationSchema: yup.object().shape({
-            username: yup.string().min(6, displayErrorMsg(intl.formatMessage({id: 'atLeast6CharAccount'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireUsername'})))
+            username: yup.string().min(6, displayErrorMsg(intl.formatMessage({id: 'atLeast6CharAccount'}))).max(30,getMaxErrStr(30)).required(displayErrorMsg(intl.formatMessage({id: 'requireUsername'})))
                 .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpecialCharAccount'})) })
                 .matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpaceAccount'})) }),
-            password: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'atLeast8CharPassword'}))).required(displayErrorMsg(intl.formatMessage({id: 'requirePassword'})))
+            password: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'atLeast8CharPassword'}))).max(60,getMaxErrStr(60)).required(displayErrorMsg(intl.formatMessage({id: 'requirePassword'})))
                 .matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({id: 'noSpacePassword'})) })
                 .matches(/^(?=.*[a-z])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeastOneSmallLetter'})) })
                 .matches(/^(?=.*[A-Z])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeastOneCapLetter'})) })
                 .matches(/^(?=.*[0-9])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeast1Number'})) })
                 .matches(/^(?=.*[!@#%&])/, { message: displayErrorMsg(intl.formatMessage({id: 'atLeast1SpecialChar'})) }),
             confirmPassword: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'atLeast8CharPassword'}))).required(displayErrorMsg(intl.formatMessage({id: 'pleaseConfirmPassword'}))).oneOf([yup.ref('password'), null], displayErrorMsg(intl.formatMessage({id: 'samePassword'}))),
-            enName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'userRequireEnglishName'}))),
+            enName: yup.string().max(40,getMaxErrStr(40)).required(displayErrorMsg(intl.formatMessage({id: 'userRequireEnglishName'}))),
             enCompanyName: yup.string().matches(/^[^$^*()]+$/, { message: displayErrorMsg('No special characters $/^/*/(/)') }).when('chCompanyName', {
                 is: (chCompanyName) => !chCompanyName || chCompanyName.length === 0,
                 then: yup.string().required(displayErrorMsg('Please enter either English or Chinese name')),
@@ -516,12 +533,12 @@ const BusCustomFormWizard = (props) => {
                 is: (enCompanyName) => !enCompanyName || enCompanyName.length === 0,
                 then: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'validateEngOrChiName'}))),
             }),
-            chName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'userRequireChineseName'}))),
-            address1: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine1'}))),
-            address2: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine2'}))),
-            address3: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine3'}))),
-            email: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(255).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))),
-            emailConfirm: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(255).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))).oneOf([yup.ref('email'), null], displayErrorMsg(intl.formatMessage({id: 'validSameEmail'}))),
+            chName: yup.string().max(6, getMaxErrStr(6)).required(displayErrorMsg(intl.formatMessage({id: 'userRequireChineseName'}))),
+            address1: yup.string().max(40, getMaxErrStr(40)).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine1'}))),
+            address2: yup.string().max(40, getMaxErrStr(40)),
+            address3: yup.string().max(40, getMaxErrStr(40)),
+            email: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(128, getMaxErrStr(128)).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))),
+            emailConfirm: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(128, getMaxErrStr(128)).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))).oneOf([yup.ref('email'), null], displayErrorMsg(intl.formatMessage({id: 'validSameEmail'}))),
             phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast2Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))),
             faxCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast2Number'}))),
             phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast8Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))),
@@ -529,7 +546,7 @@ const BusCustomFormWizard = (props) => {
             brExpiryDate: yup.date().min(new Date().toISOString().split("T")[0], displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'})))
                 .max("2099-12-31", displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))).
                 required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))),
-            brNo: yup.string().max(8).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertNumber'}))).test('checkBrNoFormat', displayErrorMsg(`${intl.formatMessage({id: 'pleaseFillInValidBusinessRegCertNumber'})} (e.g. 12341234)`), function (value) {
+            brNo: yup.string().max(8, getMaxErrStr(8)).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertNumber'}))).test('checkBrNoFormat', displayErrorMsg(`${intl.formatMessage({id: 'pleaseFillInValidBusinessRegCertNumber'})} (e.g. 12341234)`), function (value) {
                 // var brNo_pattern = /[0-9]{8}-[0-9]{3}-(0[1-9]|1[012])-[0-9]{2}-[0-9A-Z]{1}/
                 var brNo_pattern = /[0-9]{8}/
                 if (value !== undefined) {
@@ -540,7 +557,7 @@ const BusCustomFormWizard = (props) => {
                     }
                 }
             }),
-            captchaField: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'requireVerify'}))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證'))
+            captchaField: yup.string().max(5,  getMaxErrStr(5)).required(displayErrorMsg(intl.formatMessage({id: 'requireVerify'}))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證'))
         }, ['enCompanyName', 'chCompanyName']),
 
     });
@@ -942,6 +959,7 @@ const BusCustomFormWizard = (props) => {
                                             id="address2-signup"
                                             value={formik.values.address2}
                                             name="address2"
+                                            onBlur={formik.handleBlur}
                                             onChange={formik.handleChange}
                                             placeholder={intl.formatMessage({id: 'addressLine2'})}
                                             inputProps={{
@@ -958,6 +976,7 @@ const BusCustomFormWizard = (props) => {
                                             id="address3-signup"
                                             value={formik.values.address3}
                                             name="address3"
+                                            onBlur={formik.handleBlur}
                                             onChange={formik.handleChange}
                                             placeholder={intl.formatMessage({id: 'addressLine3'})}
                                             inputProps={{
@@ -974,6 +993,8 @@ const BusCustomFormWizard = (props) => {
                                             value={selectedAddress4}
                                             options={address4ComboList}
                                             disabled={checkCountry}
+                                            error={Boolean(districtErrStr!="")}
+                                            onBlur={formik.handleBlur}
                                             getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""}
                                             onChange={(event, newValue) => {
                                                 setSelectedAddress4(newValue);
@@ -1023,6 +1044,11 @@ const BusCustomFormWizard = (props) => {
                                                 {formik.errors.address3}
                                             </FormHelperText>
                                         )}
+                                         {districtErrStr!= "" && (
+                                            <FormHelperText error >
+                                                {districtErrStr}
+                                            </FormHelperText>
+                                        )}
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>

src/pages/authentication/auth-forms/CustomFormWizard.js

@@ -96,6 +96,7 @@ const CustomFormWizard = (props) => {
     const email = document.getElementById("email-login")
     const [checkEmail, setCheckEmail] = useState(false)
     const [checkEmailBlur, setCheckEmailBlur] = useState(false)
+    const [districtErrStr, setDistrictErrStr] = useState("")
 
     const idDocTypeComboList = ComboData.idDocType;
     const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n"
@@ -291,6 +292,10 @@ const CustomFormWizard = (props) => {
         props.setUpdateValid(isValid)
     }, [isValid])
 
+    useEffect(() => {
+        props.setUpdateValid(isValid)
+    }, [isValid])
+
     useEffect(() => {
         checkDataField(values)
     }, [
@@ -298,6 +303,14 @@ const CustomFormWizard = (props) => {
         selectedAddress4, selectedAddress5,
         termsAndConAccept, termsAndConNotAccept, fileList])
 
+    useEffect(()=>{
+        setDistrictErrStr("");
+        if(selectedAddress5?.type === "hongKong"){
+            if(selectedAddress4 ==null || selectedAddress4 == ""|| selectedAddress4 == {})
+                setDistrictErrStr(getRequiredErrStr("district"))
+        }
+    },[selectedAddress4, selectedAddress5])
+
     useEffect(() => {
         props.step == 2 ? _onSubmit() : null;
         if (captchaImg == "")
@@ -528,6 +541,13 @@ const CustomFormWizard = (props) => {
         return <Typography variant="errorMessage1">{errorMsg}</Typography>
     }
 
+    function getMaxErrStr(num, fieldname){
+        return displayErrorMsg(intl.formatMessage({ id: 'noMoreThenNWords' },{num:num, fieldname:fieldname?intl.formatMessage({ id: fieldname})+": ":""}));
+    }
+    function getRequiredErrStr(fieldname){
+        return displayErrorMsg(intl.formatMessage({ id: 'require'},{fieldname:fieldname?intl.formatMessage({ id: fieldname}):""}));
+    }
+
     const formik = useFormik({
         initialValues: ({
             username: '',
@@ -551,23 +571,23 @@ const CustomFormWizard = (props) => {
             captchaField: ''
         }),
         validationSchema: yup.object().shape({
-            username: yup.string().min(6, displayErrorMsg(intl.formatMessage({ id: 'atLeast6CharAccount' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireUsername' })))
+            username: yup.string().min(6, displayErrorMsg(intl.formatMessage({ id: 'atLeast6CharAccount' }))).max(30, getMaxErrStr(30)).required(displayErrorMsg(intl.formatMessage({ id: 'requireUsername' })))
                 .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(intl.formatMessage({ id: 'noSpecialCharAccount' })) })
                 .matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({ id: 'noSpaceAccount' })) }),
-            password: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'atLeast8CharPassword' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requirePassword' })))
+            password: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'atLeast8CharPassword' }))).max(60, getMaxErrStr(60)).required(displayErrorMsg(intl.formatMessage({ id: 'requirePassword' })))
                 .matches(/^\S*$/, { message: displayErrorMsg(intl.formatMessage({ id: 'noSpacePassword' })) })
                 .matches(/^(?=.*[a-z])/, { message: displayErrorMsg(intl.formatMessage({ id: 'atLeastOneSmallLetter' })) })
                 .matches(/^(?=.*[A-Z])/, { message: displayErrorMsg(intl.formatMessage({ id: 'atLeastOneCapLetter' })) })
                 .matches(/^(?=.*[0-9])/, { message: displayErrorMsg(intl.formatMessage({ id: 'atLeast1Number' })) })
                 .matches(/^(?=.*[!@#%&])/, { message: displayErrorMsg(intl.formatMessage({ id: 'atLeast1SpecialChar' })) }),
             confirmPassword: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'atLeast8CharPassword' }))).required(displayErrorMsg(intl.formatMessage({ id: 'pleaseConfirmPassword' }))).oneOf([yup.ref('password'), null], displayErrorMsg(intl.formatMessage({ id: 'samePassword' }))),
-            enName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireEnglishName' }))),
-            chName: yup.string().max(6).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireChineseName' }))),
-            address1: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine1' }))),
-            address2: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine2' }))),
-            address3: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine3' }))),
-            email: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(255).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))),
-            emailConfirm: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(255).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))).oneOf([yup.ref('email'), null], displayErrorMsg(intl.formatMessage({ id: 'validSameEmail' }))),
+            enName: yup.string().max(40, getMaxErrStr(40)).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireEnglishName' }))),
+            chName: yup.string().max(6, getMaxErrStr(6)).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireChineseName' }))),
+            address1: yup.string().max(40, getMaxErrStr(40, "addressLine1")).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine1' }))),
+            address2: yup.string().max(40, getMaxErrStr(40, "addressLine2")),
+            address3: yup.string().max(40, getMaxErrStr(40, "addressLine3")),
+            email: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(128, getMaxErrStr(128)).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))),
+            emailConfirm: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(128, getMaxErrStr(128)).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))).oneOf([yup.ref('email'), null], displayErrorMsg(intl.formatMessage({ id: 'validSameEmail' }))),
             idNo: yup.string().required(displayErrorMsg(`${intl.formatMessage({ id: 'require' })}${selectedIdDocInputType}${intl.formatMessage({ id: 'number' })}`))
                 .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({ id: 'noSpecialCharacter' })}`) })
                 .matches(/^\S*$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({ id: 'noSpace' })}`) })
@@ -622,13 +642,13 @@ const CustomFormWizard = (props) => {
                         }
                     }
                 }),
-            checkDigit: yup.string().max(1).required(displayErrorMsg(intl.formatMessage({ id: 'requiredNumberInQuote' }))),
-            idDocType: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({ id: 'requireIdDocType' }))),
+            checkDigit: yup.string().max(1, getMaxErrStr(1)).required(displayErrorMsg(intl.formatMessage({ id: 'requiredNumberInQuote' }))),
+            idDocType: yup.string().max(255, getMaxErrStr(255)).required(displayErrorMsg(intl.formatMessage({ id: 'requireIdDocType' }))),
             phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast2Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireDialingCode' }))),
             // faxCountryCode: yup.string().min(3,'請輸入3位數字'),
             phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast8Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireContactNumber' }))),
             // fax: yup.string().min(8,'請輸入8位數字'),
-            captchaField: yup.string().required(displayErrorMsg(intl.formatMessage({ id: 'requireVerify' }))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
+            captchaField: yup.string().max(5,  getMaxErrStr(5)).required(displayErrorMsg(intl.formatMessage({ id: 'requireVerify' }))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
         }),
     });
 
@@ -902,17 +922,19 @@ const CustomFormWizard = (props) => {
                                                             }
                                                         } else {
                                                             setSelectedIdDocInputType("");
+                                                            setSelectedIdDocType({});
                                                         }
                                                     }}
                                                     sx={{ "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
                                                     renderInput={(params) => <TextField
                                                         {...params}
+                                                        error={formik.touched.idDocType && (selectedIdDocType === null || selectedIdDocType?.type == null)}
                                                         placeholder={intl.formatMessage({ id: 'idDocType' })}
                                                     />}
                                                 />
                                                 {formik.touched.idDocType && (
-                                                    selectedIdDocType === null ?
-                                                        <FormHelperText error id="helper-text-idDocType-signup">
+                                                    selectedIdDocType === null || selectedIdDocType?.type == null ?
+                                                        <FormHelperText error id="helper-text-idDocType-signup" sx={{fontSize:16,fontWeight: 'bold',}}>
                                                             <FormattedMessage id="requireIdDocType" />
                                                         </FormHelperText> : ''
                                                 )}
@@ -1144,6 +1166,7 @@ const CustomFormWizard = (props) => {
                                             value={formik.values.address2}
                                             name="address2"
                                             onChange={formik.handleChange}
+                                            onBlur={formik.handleBlur}
                                             placeholder={intl.formatMessage({ id: 'addressLine2' })}
                                             inputProps={{
                                                 onKeyDown: (e) => {
@@ -1160,6 +1183,7 @@ const CustomFormWizard = (props) => {
                                             value={formik.values.address3}
                                             name="address3"
                                             onChange={formik.handleChange}
+                                            onBlur={formik.handleBlur}
                                             placeholder={intl.formatMessage({ id: 'addressLine3' })}
                                             inputProps={{
                                                 onKeyDown: (e) => {
@@ -1175,6 +1199,8 @@ const CustomFormWizard = (props) => {
                                             value={selectedAddress4}
                                             options={ComboData.district}
                                             disabled={checkCountry}
+                                            error={Boolean(districtErrStr!="")}
+                                            onBlur={formik.handleBlur}
                                             getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""}
                                             onChange={(event, newValue) => {
                                                 setSelectedAddress4(newValue);
@@ -1226,6 +1252,11 @@ const CustomFormWizard = (props) => {
                                                 {formik.errors.address3}
                                             </FormHelperText>
                                         )}
+                                         {districtErrStr!= "" && (
+                                            <FormHelperText error >
+                                                {districtErrStr}
+                                            </FormHelperText>
+                                        )}
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
@@ -1709,7 +1740,7 @@ const CustomFormWizard = (props) => {
                                                     {formik.values.address3}
                                                 </Typography>
                                                 : null}
-                                            {selectedAddress5.label === "hongKong" ?
+                                            {selectedAddress5.type === "hongKong" ?
                                                 <Stack direction="row">
                                                     <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address4-signup">
                                                         <FormattedMessage id="region" />:

src/pages/authentication/auth-forms/IAmSmartFormWizard.js

@@ -38,7 +38,7 @@ import * as HttpUtils from "../../../utils/HttpUtils";
 import LoopIcon from '@mui/icons-material/Loop';
 import { useTheme } from '@mui/material/styles';
 import { useLocation } from "react-router-dom";
-import {FormattedMessage, useIntl} from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
 // ============================|| FIREBASE - REGISTER ||============================ //
 
@@ -63,6 +63,7 @@ const CustomFormWizard = (props) => {
     const email = document.getElementById("email-login")
     const [checkEmail, setCheckEmail] = useState(false)
     const [checkEmailBlur, setCheckEmailBlur] = useState(false)
+    const [districtErrStr, setDistrictErrStr] = useState("")
 
     const address4ComboList = ComboData.district;
     const address5ComboList = ComboData.country;
@@ -78,11 +79,28 @@ const CustomFormWizard = (props) => {
 
     useEffect(() => {
         location.state?.responseData ?? {}
-        if(captchaImg=="")
-        onCaptchaChange();
+        if (captchaImg == "")
+            onCaptchaChange();
         responseToData();
     }, []);
 
+    useEffect(() => {
+        setDistrictErrStr("");
+        if (selectedAddress5?.type === "hongKong") {
+            if (selectedAddress4 == null || selectedAddress4 == "" || selectedAddress4 == {})
+                setDistrictErrStr(getRequiredErrStr("district"))
+        }
+    }, [selectedAddress4, selectedAddress5])
+
+    function getRequiredErrStr(fieldname){
+        return displayErrorMsg(intl.formatMessage({ id: 'require'},{fieldname:fieldname?intl.formatMessage({ id: fieldname}):""}));
+    }
+
+    function getMaxErrStr(num, fieldname){
+        return displayErrorMsg(intl.formatMessage({ id: 'noMoreThenNWords' },{num:num, fieldname:fieldname?intl.formatMessage({ id: fieldname})+": ":""}));
+    }
+
+
     const responseToData = () => {
         //let rd = JSON.parse("{\"emailAddress\":\"[email protected]\",\"postalAddress\":{\"EngPremisesAddress\":{\"EngDistrict\":{\"DcDistrict\":\"KC\",\"Sub-district\":\"TSING YI\"},\"EngEstate\":{\"EstateName\":\"Cheung Hang Estate\",\"EngPhase\":{\"PhaseName\":\"N/A\"}},\"BuildingName\":\"Hang Lai House\",\"EngBlock\":{\"BlockDescriptor\":\"Block\",\"BlockNo\":\"2\"},\"Region\":\"NT\",\"EngStreet\":{\"StreetName\":\"Liu To Road\",\"BuildingNoFrom\":\"6\"},\"Eng3dAddress\":{\"EngFloor\":{\"FloorNum\":\"33\"},\"EngUnit\":{\"UnitDescriptor\":\"Room\",\"UnitNo\":\"3301\"}}}},\"mobileNumber\":{\"CountryCode\":\"852\",\"SubscriberNumber\":\"99999999\"},\"residentialAddress\":{\"ChiPremisesAddress\":{\"Chi3dAddress\":{\"ChiUnit\":{\"UnitDescriptor\":\"室\",\"UnitNo\":\"1010\"},\"ChiFloor\":{\"FloorNum\":\"10\"}},\"ChiBlock\":{\"BlockDescriptor\":\"座\",\"BlockNo\":\"2\"},\"BuildingName\":\"亨麗樓(第2座)\",\"ChiDistrict\":{\"DcDistrict\":\"KC\",\"Sub-district\":\"青衣\"},\"Region\":\"新界\",\"ChiEstate\":{\"EstateName\":\"長亨邨\"},\"ChiStreet\":{\"StreetName\":\"寮肚路\",\"BuildingNoFrom\":\"6\"}}},\"enName\":{\"UnstructuredName\":\"Testing Co One\"},\"idNo\":{\"Identification\":\"G561107\",\"CheckDigit\":\"4\"},\"chName\":{\"ChineseName\":\"測試商一\"}}");
         let rd = JSON.parse(location.state?.responseData.data);
@@ -91,7 +109,7 @@ const CustomFormWizard = (props) => {
             "chName": rd?.chName?.ChineseName ?? "",
             "idNo": rd?.idNo?.Identification ?? "",
             "checkDigit": rd?.idNo?.CheckDigit ?? "",
-			"email": rd?.emailAddress ?? "",
+            "email": rd?.emailAddress ?? "",
             "phone": rd?.mobileNumber?.SubscriberNumber ?? "",
             "phoneCountryCode": rd?.mobileNumber?.CountryCode ?? "",
         };
@@ -136,7 +154,7 @@ const CustomFormWizard = (props) => {
         let buildingName = pAdd.BuildingName ?? "";
         let estate = pAdd.ChiEstate?.EstateName ?? "";
         let district = pAdd.ChiDistrict["Sub - district"] ?? "";
-        return getAddressStr([district, street, estate, buildingName, street, floor, block, unit ]);
+        return getAddressStr([district, street, estate, buildingName, street, floor, block, unit]);
     }
 
     const getAddressStr = (strs) => {
@@ -180,22 +198,22 @@ const CustomFormWizard = (props) => {
 
     useEffect(() => {
         if (iAmSmartData) {
-            formik.setFieldValue("enName", iAmSmartData.enName??"");
-            formik.setFieldValue("chName", iAmSmartData.chName??"");
-            formik.setFieldValue("idNo", iAmSmartData.idNo??"");
-            formik.setFieldValue("checkDigit", iAmSmartData.checkDigit??"");
-            formik.setFieldValue("email", iAmSmartData.email??"");
-            formik.setFieldValue("phone", iAmSmartData.phone??"");
-            formik.setFieldValue("phoneCountryCode", iAmSmartData.phoneCountryCode??"");
-            formik.setFieldValue("address1", iAmSmartData.address1??"");
-            props.setIdNo(iAmSmartData.idNo??"");
+            formik.setFieldValue("enName", iAmSmartData.enName ?? "");
+            formik.setFieldValue("chName", iAmSmartData.chName ?? "");
+            formik.setFieldValue("idNo", iAmSmartData.idNo ?? "");
+            formik.setFieldValue("checkDigit", iAmSmartData.checkDigit ?? "");
+            formik.setFieldValue("email", iAmSmartData.email ?? "");
+            formik.setFieldValue("phone", iAmSmartData.phone ?? "");
+            formik.setFieldValue("phoneCountryCode", iAmSmartData.phoneCountryCode ?? "");
+            formik.setFieldValue("address1", iAmSmartData.address1 ?? "");
+            props.setIdNo(iAmSmartData.idNo ?? "");
         }
     }, [iAmSmartData])
 
     const onCaptchaChange = () => {
         HttpUtils.post({
             url: POST_CAPTCHA,
-            params: { width: 130, height: 40,  captcha: captchaImg},
+            params: { width: 130, height: 40, captcha: captchaImg },
             onSuccess: (responseData) => {
                 props.setBase64Url(responseData.base64Url)
                 localStorage.setItem("base64Url", responseData.base64Url);
@@ -250,8 +268,8 @@ const CustomFormWizard = (props) => {
 
     useEffect(() => {
         props.step == 2 ? _onSubmit() : null;
-        if(captchaImg=="")
-        onCaptchaChange();
+        if (captchaImg == "")
+            onCaptchaChange();
         checkDataField(values)
     }, [props.step])
 
@@ -350,27 +368,27 @@ const CustomFormWizard = (props) => {
 
     const formik = useFormik({
         initialValues: ({
-            email: iAmSmartData.email??"",
-            emailConfirm: iAmSmartData.email??"",
-            address1: iAmSmartData.address1??"",
+            email: iAmSmartData.email ?? "",
+            emailConfirm: iAmSmartData.email ?? "",
+            address1: iAmSmartData.address1 ?? "",
             address2: '',
             address3: '',
-            phone: iAmSmartData.phone??"",
-            phoneCountryCode: iAmSmartData.phoneCountryCode??"852",
+            phone: iAmSmartData.phone ?? "",
+            phoneCountryCode: iAmSmartData.phoneCountryCode ?? "852",
             submit: null,
             fax: '',
             faxCountryCode: '852',
             captchaField: ''
         }),
         validationSchema: yup.object().shape({
-            address1: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine1'}))),
-            address2: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine2'}))),
-            address3: yup.string().max(40).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine3'}))),
-            email: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(255).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))),
-            emailConfirm: yup.string().email(displayErrorMsg(intl.formatMessage({id: 'validEmailFormat'}))).max(255).required(displayErrorMsg(intl.formatMessage({id: 'requireEmail'}))).oneOf([yup.ref('email'), null], displayErrorMsg(intl.formatMessage({id: 'validSameEmail'}))),
-            phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast2Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))),
-            phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'requireAtLeast8Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))),
-            captchaField: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'requireVerify'}))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
+            address1: yup.string().max(40, getMaxErrStr(40)).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine1' }))),
+            address2: yup.string().max(40),
+            address3: yup.string().max(40),
+            email: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(128,  getMaxErrStr(128)).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))),
+            emailConfirm: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(128,  getMaxErrStr(128)).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))).oneOf([yup.ref('email'), null], displayErrorMsg(intl.formatMessage({ id: 'validSameEmail' }))),
+            phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast2Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireDialingCode' }))),
+            phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast8Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireContactNumber' }))),
+            captchaField: yup.string().max(5,  getMaxErrStr(5)).required(displayErrorMsg(intl.formatMessage({ id: 'requireVerify' }))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
         }),
     });
 
@@ -393,12 +411,12 @@ const CustomFormWizard = (props) => {
 
                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
                                     <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
-                                        <FormattedMessage id="becomeNewPersonalUser"/>
+                                        <FormattedMessage id="becomeNewPersonalUser" />
                                     </Typography><img src={iAmSmartICon} alt="iAM Smart" width="50" />
                                 </div>
 
                                 <Typography mt={0.25} variant="h6" sx={{ color: '#f10000' }}>
-                                    <FormattedMessage id="requireString"/>。
+                                    <FormattedMessage id="requireString" />。
                                 </Typography>
                                 <Stack mt={1} direction="row" style={{ alignItems: "center" }}><img src={iAmSmartICon} alt="iAM Smart" width="25" /><Typography mt={0.25} variant="h6" >: 表示該項由「智方便」提供。</Typography></Stack>
 
@@ -409,7 +427,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
-                                            <FormattedMessage id="yourPersonalInformation"/>
+                                            <FormattedMessage id="yourPersonalInformation" />
                                         </Typography>
                                     </Stack>
                                 </Grid>
@@ -418,7 +436,7 @@ const CustomFormWizard = (props) => {
                                         <Stack spacing={1}>
                                             <InputLabel htmlFor="idDocType-signup">
                                                 <Typography variant="h5">
-                                                    香港身份證: {iAmSmartData.idNo+"("+iAmSmartData.checkDigit+")"}
+                                                    香港身份證: {iAmSmartData.idNo + "(" + iAmSmartData.checkDigit + ")"}
                                                 </Typography>
                                             </InputLabel>
                                         </Stack>
@@ -428,7 +446,7 @@ const CustomFormWizard = (props) => {
                                     <Stack spacing={1}>
                                         <InputLabel htmlFor="enName-signup">
                                             <Typography variant="h5">
-                                                <FormattedMessage id="userEnglishName"/>: {iAmSmartData.enName}
+                                                <FormattedMessage id="userEnglishName" />: {iAmSmartData.enName}
                                             </Typography>
                                         </InputLabel>
 
@@ -438,7 +456,7 @@ const CustomFormWizard = (props) => {
                                     <Stack spacing={1}>
                                         <InputLabel htmlFor="chName-signup">
                                             <Typography variant="h5">
-                                                {intl.formatMessage({id: 'userChineseName'})}: {iAmSmartData.chName}
+                                                {intl.formatMessage({ id: 'userChineseName' })}: {iAmSmartData.chName}
                                             </Typography>
                                         </InputLabel>
                                     </Stack>
@@ -447,9 +465,9 @@ const CustomFormWizard = (props) => {
                                     <Stack spacing={1}>
                                         <InputLabel htmlFor="address1-signup">
                                             <Typography variant="h5">
-                                                <FormattedMessage id="formAddress"/>
+                                                <FormattedMessage id="formAddress" />
                                                 <span style={{ color: '#f10000' }}>*</span>
-                                                {iAmSmartData.address1?<img src={iAmSmartICon} alt="iAM Smart" width="25" />:null}
+                                                {iAmSmartData.address1 ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}
                                             </Typography>
                                         </InputLabel>
                                         <OutlinedInput
@@ -459,7 +477,7 @@ const CustomFormWizard = (props) => {
                                             value={formik.values.address1}
                                             name="address1"
                                             onChange={formik.handleChange}
-                                            placeholder={intl.formatMessage({id: 'addressLine1'})}
+                                            placeholder={intl.formatMessage({ id: 'addressLine1' })}
                                             onBlur={formik.handleBlur}
                                             inputProps={{
                                                 onKeyDown: (e) => {
@@ -475,8 +493,9 @@ const CustomFormWizard = (props) => {
                                             id="address2-signup"
                                             value={formik.values.address2}
                                             name="address2"
+                                            onBlur={formik.handleBlur}
                                             onChange={formik.handleChange}
-                                            placeholder={intl.formatMessage({id: 'addressLine2'})}
+                                            placeholder={intl.formatMessage({ id: 'addressLine2' })}
                                             inputProps={{
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
@@ -491,8 +510,9 @@ const CustomFormWizard = (props) => {
                                             id="address3-signup"
                                             value={formik.values.address3}
                                             name="address3"
+                                            onBlur={formik.handleBlur}
                                             onChange={formik.handleChange}
-                                            placeholder={intl.formatMessage({id: 'addressLine3'})}
+                                            placeholder={intl.formatMessage({ id: 'addressLine3' })}
                                             inputProps={{
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
@@ -507,12 +527,14 @@ const CustomFormWizard = (props) => {
                                             value={selectedAddress4}
                                             options={address4ComboList}
                                             disabled={checkCountry}
-                                            getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""}
+                                            error={Boolean(districtErrStr!="")}
+                                            onBlur={formik.handleBlur}
+                                            getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""}
                                             onChange={(event, newValue) => {
                                                 setSelectedAddress4(newValue);
                                             }}
                                             sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
-                                            renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({id: 'region'})}
+                                            renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({ id: 'region' })}
                                             />}
                                         />
                                         <Autocomplete
@@ -520,7 +542,7 @@ const CustomFormWizard = (props) => {
                                             id="address5-combo"
                                             value={selectedAddress5}
                                             options={address5ComboList}
-                                            getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""}
+                                            getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""}
                                             onChange={(event, newValue) => {
                                                 if (newValue !== null) {
                                                     setSelectedAddress5(newValue);
@@ -537,7 +559,7 @@ const CustomFormWizard = (props) => {
                                             }}
 
                                             sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
-                                            renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({id: 'regionOrCountry'})} />}
+                                            renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({ id: 'regionOrCountry' })} />}
                                         />
                                         {formik.touched.address1 && formik.errors.address1 && (
                                             <FormHelperText error id="helper-text-address1-signup">
@@ -554,12 +576,18 @@ const CustomFormWizard = (props) => {
                                                 {formik.errors.address3}
                                             </FormHelperText>
                                         )}
+
+                                        {districtErrStr != "" && (
+                                            <FormHelperText error >
+                                                {districtErrStr}
+                                            </FormHelperText>
+                                        )}
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
-                                            <FormattedMessage id="yourContact"/>
+                                            <FormattedMessage id="yourContact" />
                                         </Typography>
                                     </Stack>
                                 </Grid>
@@ -569,9 +597,9 @@ const CustomFormWizard = (props) => {
                                             <Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                 <InputLabel htmlFor="email-signup">
                                                     <Typography variant="h5">
-                                                        <FormattedMessage id="userContactEmail"/>
+                                                        <FormattedMessage id="userContactEmail" />
                                                         <span style={{ color: '#f10000' }}>*</span>
-                                                        {iAmSmartData.email?<img src={iAmSmartICon} alt="iAM Smart" width="25" />:null}
+                                                        {iAmSmartData.email ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}
                                                     </Typography>
                                                 </InputLabel>
                                                 <OutlinedInput
@@ -582,7 +610,7 @@ const CustomFormWizard = (props) => {
                                                     value={formik.values.email.trim()}
                                                     name="email"
                                                     onChange={formik.handleChange}
-                                                    placeholder={intl.formatMessage({id: 'userContactEmail'})}
+                                                    placeholder={intl.formatMessage({ id: 'userContactEmail' })}
                                                     onBlur={formik.handleBlur}
                                                     inputProps={{
                                                         onKeyDown: (e) => {
@@ -599,7 +627,7 @@ const CustomFormWizard = (props) => {
                                                 )}
                                                 {checkEmail && (
                                                     <FormHelperText error id="helper-text-email-signup">
-                                                        <FormattedMessage id="emailUsed"/>
+                                                        <FormattedMessage id="emailUsed" />
                                                     </FormHelperText>
                                                 )}
                                             </Stack>
@@ -608,7 +636,7 @@ const CustomFormWizard = (props) => {
                                             <Stack spacing={1} >
                                                 <InputLabel htmlFor="emailConfirm-signup">
                                                     <Typography variant="h5">
-                                                        <FormattedMessage id="userContactEmail"/>
+                                                        <FormattedMessage id="userContactEmail" />
                                                         <span style={{ color: '#f10000' }}>*</span>
                                                     </Typography>
                                                 </InputLabel>
@@ -621,7 +649,7 @@ const CustomFormWizard = (props) => {
                                                     name="emailConfirm"
                                                     // onBlur={formik.handleBlur}
                                                     onChange={formik.handleChange}
-                                                    placeholder={intl.formatMessage({id: 'confirmEmail'})}
+                                                    placeholder={intl.formatMessage({ id: 'confirmEmail' })}
                                                     onBlur={formik.handleBlur}
                                                     inputProps={{
                                                         onKeyDown: (e) => {
@@ -648,9 +676,9 @@ const CustomFormWizard = (props) => {
                                                     <Stack direction="column" spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                         <InputLabel htmlFor="phone-signup">
                                                             <Typography variant="h5">
-                                                                <FormattedMessage id="userContactNumber"/>
+                                                                <FormattedMessage id="userContactNumber" />
                                                                 <span style={{ color: '#f10000' }}>*</span>
-                                                                {iAmSmartData.phone?<img src={iAmSmartICon} alt="iAM Smart" width="25" />:null}
+                                                                {iAmSmartData.phone ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}
                                                             </Typography>
                                                         </InputLabel>
                                                         <Stack direction="row">
@@ -668,7 +696,7 @@ const CustomFormWizard = (props) => {
                                                                     }
                                                                     formik.setFieldValue("phoneCountryCode", value);
                                                                 }}
-                                                                placeholder={intl.formatMessage({id: 'dialingCode'})}
+                                                                placeholder={intl.formatMessage({ id: 'dialingCode' })}
                                                                 error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                 onBlur={formik.handleBlur}
                                                                 inputProps={{
@@ -695,7 +723,7 @@ const CustomFormWizard = (props) => {
                                                                     }
                                                                     formik.setFieldValue("phone", value);
                                                                 }}
-                                                                placeholder={intl.formatMessage({id: 'userContactNumber'})}
+                                                                placeholder={intl.formatMessage({ id: 'userContactNumber' })}
                                                                 error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                 onBlur={formik.handleBlur}
                                                                 inputProps={{
@@ -724,7 +752,7 @@ const CustomFormWizard = (props) => {
                                                     <Stack spacing={1} direction="column">
                                                         <InputLabel htmlFor="fax-signup">
                                                             <Typography variant="h5">
-                                                                <FormattedMessage id="userFaxNumber"/>
+                                                                <FormattedMessage id="userFaxNumber" />
                                                             </Typography>
                                                         </InputLabel>
                                                         <Stack direction="row">
@@ -742,7 +770,7 @@ const CustomFormWizard = (props) => {
                                                                     }
                                                                     formik.setFieldValue("faxCountryCode", value);
                                                                 }}
-                                                                placeholder={intl.formatMessage({id: 'dialingCode'})}
+                                                                placeholder={intl.formatMessage({ id: 'dialingCode' })}
                                                                 onBlur={formik.handleBlur}
                                                                 inputProps={{
                                                                     maxLength: 3,
@@ -768,7 +796,7 @@ const CustomFormWizard = (props) => {
                                                                     }
                                                                     formik.setFieldValue("fax", value);
                                                                 }}
-                                                                placeholder={intl.formatMessage({id: 'userFaxNumber'})}
+                                                                placeholder={intl.formatMessage({ id: 'userFaxNumber' })}
                                                                 inputProps={{
                                                                     maxLength: 8,
                                                                     onKeyDown: (e) => {
@@ -791,7 +819,7 @@ const CustomFormWizard = (props) => {
                                 <Grid container>
                                     <Grid item xs={12} md={12}>
                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
-                                            <FormattedMessage id="termsAndCondition"/>
+                                            <FormattedMessage id="termsAndCondition" />
                                             <span style={{ color: '#f10000' }}>*</span>
                                         </Typography>
                                     </Grid>
@@ -816,7 +844,7 @@ const CustomFormWizard = (props) => {
                                                                 size="small"
                                                             />
                                                             <Typography variant="h5">
-                                                                <FormattedMessage id="acceptTerms"/>
+                                                                <FormattedMessage id="acceptTerms" />
                                                             </Typography>
                                                         </Grid>
                                                     </Grid>
@@ -832,7 +860,7 @@ const CustomFormWizard = (props) => {
                                                                 size="small"
                                                             />
                                                             <Typography variant="h5">
-                                                                <FormattedMessage id="rejectTerms"/>
+                                                                <FormattedMessage id="rejectTerms" />
                                                             </Typography>
                                                         </Grid>
                                                     </Grid>
@@ -846,7 +874,7 @@ const CustomFormWizard = (props) => {
                                 <Grid container>
                                     <Stack direction="column">
                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
-                                            <FormattedMessage id="verify"/>
+                                            <FormattedMessage id="verify" />
                                             <span style={{ color: '#f10000' }}>*</span>
                                         </Typography>
                                         <Stack spacing={1} direction="row">
@@ -894,7 +922,7 @@ const CustomFormWizard = (props) => {
                             <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
                                     <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
-                                        <FormattedMessage id="becomeNewPersonalUser"/>
+                                        <FormattedMessage id="becomeNewPersonalUser" />
                                     </Typography>
                                 </div>
                             </Stack>
@@ -904,7 +932,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
-                                            <FormattedMessage id="yourPersonalInformation"/>
+                                            <FormattedMessage id="yourPersonalInformation" />
                                         </Typography>
                                         {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                         Already have an account?
@@ -914,10 +942,10 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} md={12} >
                                     <Stack spacing={1}>
                                         <Typography variant="h5" color={theme.palette.grey[600]}>
-                                            <FormattedMessage id="userIdDoc"/>
+                                            <FormattedMessage id="userIdDoc" />
                                         </Typography>
                                         <Typography variant="h5" name="preview-idDocType">
-                                            {formik.values.idNo+"("+formik.values.checkDigit+")"}
+                                            {formik.values.idNo + "(" + formik.values.checkDigit + ")"}
                                         </Typography>
                                     </Stack>
                                 </Grid>
@@ -925,7 +953,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="h5" color={theme.palette.grey[600]}>
-                                            <FormattedMessage id="userEnglishName"/>:
+                                            <FormattedMessage id="userEnglishName" />:
                                         </Typography>
                                         <Typography variant="h5" id="preview-enName-signup">
                                             {formik.values.enName}
@@ -935,7 +963,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="h5" color={theme.palette.grey[600]}>
-                                            <FormattedMessage id="userChineseName"/>:
+                                            <FormattedMessage id="userChineseName" />:
                                         </Typography>
                                         <Typography variant="h5" id="preview-chName-signup">
                                             {formik.values.chName}
@@ -945,7 +973,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="h5" color={theme.palette.grey[600]}>
-                                            <FormattedMessage id="formAddress"/>:
+                                            <FormattedMessage id="formAddress" />:
                                         </Typography>
                                         <Stack spacing={1} direction="column">
                                             <Typography variant="h5" id="preview-address1-signup">
@@ -964,19 +992,19 @@ const CustomFormWizard = (props) => {
                                             {selectedAddress5.type === "hongKong" ?
                                                 <Stack direction="row">
                                                     <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address4-signup">
-                                                        <FormattedMessage id="region"/>:
+                                                        <FormattedMessage id="region" />:
                                                     </Typography>
                                                     <Typography variant="h5">
-                                                        {!selectedAddress4? "" : intl.formatMessage({id: selectedAddress4.type})}
+                                                        {!selectedAddress4 ? "" : intl.formatMessage({ id: selectedAddress4.type })}
                                                     </Typography>
                                                 </Stack>
                                                 : null}
                                             <Stack direction="row">
                                                 <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address5-signup">
-                                                    <FormattedMessage id="regionOrCountry"/>:
+                                                    <FormattedMessage id="regionOrCountry" />:
                                                 </Typography>
                                                 <Typography variant="h5">
-                                                    {intl.formatMessage({id: selectedAddress5.type})}
+                                                    {intl.formatMessage({ id: selectedAddress5.type })}
                                                 </Typography>
                                             </Stack>
                                         </Stack>
@@ -985,14 +1013,14 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                         <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
-                                            <FormattedMessage id="yourContact"/>
+                                            <FormattedMessage id="yourContact" />
                                         </Typography>
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} md={12}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="h5" color={theme.palette.grey[600]}>
-                                            <FormattedMessage id="userContactEmail"/>:
+                                            <FormattedMessage id="userContactEmail" />:
                                         </Typography>
                                         <Typography variant="h5" id="preview-email-signup">
                                             {formik.values.email}
@@ -1002,7 +1030,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
                                         <Typography variant="h5" color={theme.palette.grey[600]}>
-                                            <FormattedMessage id="userContactNumber"/>:
+                                            <FormattedMessage id="userContactNumber" />:
                                         </Typography>
                                         <Typography variant="h5" id="preview-phone-signup">
                                             +{formik.values.phoneCountryCode} {formik.values.phone}
@@ -1013,7 +1041,7 @@ const CustomFormWizard = (props) => {
                                     <Grid item xs={12} md={6}>
                                         <Stack spacing={1} direction="row">
                                             <Typography variant="h5" color={theme.palette.grey[600]}>
-                                                <FormattedMessage id="userFaxNumber"/>:
+                                                <FormattedMessage id="userFaxNumber" />:
                                             </Typography>
                                             <Typography variant="h5" id="preview-fax-signup">
                                                 +{formik.values.faxCountryCode} {formik.values.fax}
@@ -1036,13 +1064,13 @@ const CustomFormWizard = (props) => {
                                     <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                         <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
                                         <Typography display="inline" variant="h4">
-                                            <FormattedMessage id="registerSubmitted"/>
+                                            <FormattedMessage id="registerSubmitted" />
                                         </Typography>
                                         <Typography display="inline" variant="h4">
-                                            <FormattedMessage id="emailSent"/>
+                                            <FormattedMessage id="emailSent" />
                                         </Typography>
                                         <Button variant="outlined" component={Link} to="/login" ><Typography variant="h5">
-                                            <FormattedMessage id="backToLogin"/>
+                                            <FormattedMessage id="backToLogin" />
                                         </Typography></Button>
                                     </Stack>
                                     :
@@ -1054,7 +1082,7 @@ const CustomFormWizard = (props) => {
                                             <FormattedMessage id="registerFail" />
                                         </Typography>
                                         <Button color="error" variant="outlined" component={Link} to="/login" ><Typography variant="h5">
-                                            <FormattedMessage id="backToLogin"/>
+                                            <FormattedMessage id="backToLogin" />
                                         </Typography></Button>
                                     </Stack>
                                 }

src/translations/en.json

@@ -12,6 +12,7 @@
   "gazetteDate": "GazetteDate",
   "gazetteLength": "length",
   "gazetteSampleName": "Gazette Supplement No. 6",
+  "reason": "Reason",
 
   "payInstantly": "Instant online payment",
   "payLater": "Pay later",
@@ -28,6 +29,8 @@
   "submissionSuccess": "Application submitted successfully",
   "noMoreThen40Words": "Must not exceed 40 characters",
   "noMoreThen255Words": "Must not exceed 255 characters",
+  "noMoreThenNWords": "{fieldname} Must not exceed {num} characters",
+  "atLeastNCharAccount": "{fieldname} Please enter at least {num} digits",
 
   "MSG.registerIAmSmart": "You may click the \"iAM Smart\" button to fill the personal information automatically or enter the information manually to activate the PNSPS account now.<br/>If you want to use \"iAM Smart\" to fill the personal information, please download the \"iAM Smart\" mobile app and register as an \"iAM Smart\" user first.",
   "MSG.registerPersonal": "To complete the online application, you need to upload digital copies of identification documents.<br/>e.g. Hong Kong Identity Card, Passport, Mainland China Identity Card, Professional Practicing Certificate, etc.",
@@ -199,7 +202,7 @@
   "verifyFail": "Verification failed, please contact the relevant system administrator for assistance.",
   "validVerify": "Please enter valid verification",
   "requiredValid": "Please enter valid ",
-  "require": "Please enter ",
+  "require": "Please enter {fieldname}",
   "number": " number",
   "noSpecialCharacter": " number cannot contain special characters",
   "noSpace": " number cannot contain spaces",
@@ -209,9 +212,9 @@
   "businessRegCertValidityDate": "Business Reg Cert validity date",
   "pleaseFillInBusinessRegCertValidityDate": "Please fill in Business Reg Cert validity date",
   "formAddress": "Address",
-  "addressLine1": "First line",
-  "addressLine2": "Second line",
-  "addressLine3": "Third line",
+  "addressLine1": "First line of address",
+  "addressLine2": "Second line of address",
+  "addressLine3": "Third line of address",
   "region": "Region (only applicable to Hong Kong)",
   "validateAddressLine1": "Please enter the first line of address",
   "validateAddressLine2": "Please enter the second line of address",

src/translations/zh-CN.json

@@ -12,6 +12,7 @@
   "gazetteDate": "宪报日期",
   "gazetteLength": "长度",
   "gazetteSampleName": "宪报第6号副刊公告",
+  "reason": "原因",
 
   "payInstantly": "即时网上缴费",
   "payLater": "稍后缴费",
@@ -28,6 +29,8 @@
   "submissionSuccess": "申请提交成功",
   "noMoreThen40Words": "不得超过 40 个字符",
   "noMoreThen255Words": "不得超过 255 个字符",
+  "noMoreThenNWords": "{fieldname}不得超过 {num} 个字符",
+  "atLeastNCharAccount": "{fieldname}最少{num}个字符",
 
   "MSG.registerIAmSmart": "你可点击「智方便」按钮，系统会自动输入个人资料，或自行输入个人资料，以即时启动 公共启事提交及缴费系统 帐户。<br/>如欲使用「智方便」提供个人资料，请先下载「智方便」流动应用程式并登记成为「智方便」用户。",
   "MSG.registerPersonal": "需上载身份证明文件数码档案以进行网上申请。 <br/>如：香港身份证; 护照; 中国内地身份证; 专业执业证书等",
@@ -194,7 +197,7 @@
   "verify": "验证",
   "validVerify": "请输入有效验证",
   "requiredValid": "请输入有效的",
-  "require": "请输入",
+  "require": "请输入{fieldname}",
   "number": "号码",
   "noSpecialCharacter": "号码不包含特殊字符",
   "noSpace": "号码不包含空格",
@@ -204,9 +207,9 @@
   "businessRegCertValidityDate": "商业登记证有效日期",
   "pleaseFillInBusinessRegCertValidityDate": "请输入商业登记证有效日期",
   "formAddress": "地址",
-  "addressLine1": "第一行",
-  "addressLine2": "第二行",
-  "addressLine3": "第三行",
+  "addressLine1": "第一行地址",
+  "addressLine2": "第二行地址",
+  "addressLine3": "第三行地址",
   "validateAddressLine1": "请输入第一行地址",
   "validateAddressLine2": "请输入第二行地址",
   "validateAddressLine3": "请输入第三行地址",

src/translations/zh-HK.json

@@ -12,6 +12,7 @@
   "gazetteDate": "憲報日期",
   "gazetteLength": "長度",
   "gazetteSampleName": "憲報第6號副刊公告",
+  "reason": "原因",
 
   "payInstantly": "即時網上繳費",
   "payLater": "稍後繳費",
@@ -28,6 +29,8 @@
   "submissionSuccess": "申請提交成功",
   "noMoreThen40Words": "不得超過 40 個字符",
   "noMoreThen255Words": "不得超過 255 個字符",
+  "noMoreThenNWords": "{fieldname}不得超過 {num} 個字符",
+  "atLeastNCharAccount": "{fieldname}最少{num}個字符",
 
   "MSG.registerIAmSmart": "你可點擊「智方便」按鈕，系統會自動輸入個人資料，或自行輸入個人資料，以即時啟動 公共啟事提交及繳費系統 帳戶。<br/>如欲使用「智方便」提供個人資料，請先下載「智方便」流動應用程式並登記成為「智方便」用戶。",
   "MSG.registerPersonal": "需上載身份證明文件數碼檔案以進行網上申請。<br/>如：香港身份證; 護照; 中國內地身份證; 專業執業証書等",
@@ -199,7 +202,7 @@
   "verifyFail": "驗證失敗，請聯絡相關的系統管理員協助。",
   "validVerify": "請輸入有效驗證",
   "requiredValid": "請輸入有效的",
-  "require": "請輸入",
+  "require": "請輸入{fieldname}",
   "number": "號碼",
   "noSpecialCharacter": "號碼不包含特殊字符",
   "noSpace": "號碼不包含空格",
@@ -209,9 +212,9 @@
   "businessRegCertValidityDate": "商業登記證有效日期",
   "pleaseFillInBusinessRegCertValidityDate": "請輸入商業登記證有效日期",
   "formAddress": "地址",
-  "addressLine1": "第一行",
-  "addressLine2": "第二行",
-  "addressLine3": "第三行",
+  "addressLine1": "第一行地址",
+  "addressLine2": "第二行地址",
+  "addressLine3": "第三行地址",
   "validateAddressLine1": "請輸入第一行地址",
   "validateAddressLine2": "請輸入第二行地址",
   "validateAddressLine3": "請輸入第三行地址",

src/utils/FieldUtils.js

@@ -157,6 +157,7 @@ export const getAddressField = ({ label, valueName, form, disabled }) => {
 }
 
 export const getComboField = ({ label, dataList, valueName, form, disabled, getOptionLabel, onInputChange, onChange, filterOptions, ...props }) => {
+    let err = Boolean(form.errors[valueName]);
     return <Grid container alignItems={"center"} sx={{mb:2}}>
         <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
         <Typography variant="pnspsFormParagraphBold">{label}</Typography>
@@ -167,6 +168,8 @@ export const getComboField = ({ label, dataList, valueName, form, disabled, getO
                 disabled={disabled}
                 dataList={dataList}
                 form={form}
+                error={err}
+                helperText={form.errors[valueName] ? form.errors[valueName] : ''}
                 filterOptions={filterOptions}
                 getOptionLabel={getOptionLabel}
                 onInputChange={onInputChange}