diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js index efc324e..6e88e2d 100644 --- a/src/pages/authentication/auth-forms/CustomFormWizard.js +++ b/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 {errorMsg} } + 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,8 +642,8 @@ 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' }))), @@ -1146,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) => { @@ -1162,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) => { @@ -1177,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); @@ -1228,6 +1252,11 @@ const CustomFormWizard = (props) => { {formik.errors.address3} )} + {districtErrStr!= "" && ( + + {districtErrStr} + + )} @@ -1711,7 +1740,7 @@ const CustomFormWizard = (props) => { {formik.values.address3} : null} - {selectedAddress5.label === "hongKong" ? + {selectedAddress5.type === "hongKong" ? : diff --git a/src/translations/en.json b/src/translations/en.json index 16c964a..4be6f6d 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -28,6 +28,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.
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.
e.g. Hong Kong Identity Card, Passport, Mainland China Identity Card, Professional Practicing Certificate, etc.", @@ -199,7 +201,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 +211,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", diff --git a/src/translations/zh-CN.json b/src/translations/zh-CN.json index f3b8c67..e63ff8e 100644 --- a/src/translations/zh-CN.json +++ b/src/translations/zh-CN.json @@ -28,6 +28,8 @@ "submissionSuccess": "申请提交成功", "noMoreThen40Words": "不得超过 40 个字符", "noMoreThen255Words": "不得超过 255 个字符", + "noMoreThenNWords": "{fieldname}不得超过 {num} 个字符", + "atLeastNCharAccount": "{fieldname}最少{num}个字符", "MSG.registerIAmSmart": "你可点击「智方便」按钮，系统会自动输入个人资料，或自行输入个人资料，以即时启动 公共启事提交及缴费系统 帐户。
如欲使用「智方便」提供个人资料，请先下载「智方便」流动应用程式并登记成为「智方便」用户。", "MSG.registerPersonal": "需上载身份证明文件数码档案以进行网上申请。
如：香港身份证; 护照; 中国内地身份证; 专业执业证书等", @@ -194,7 +196,7 @@ "verify": "验证", "validVerify": "请输入有效验证", "requiredValid": "请输入有效的", - "require": "请输入", + "require": "请输入{fieldname}", "number": "号码", "noSpecialCharacter": "号码不包含特殊字符", "noSpace": "号码不包含空格", @@ -204,9 +206,9 @@ "businessRegCertValidityDate": "商业登记证有效日期", "pleaseFillInBusinessRegCertValidityDate": "请输入商业登记证有效日期", "formAddress": "地址", - "addressLine1": "第一行", - "addressLine2": "第二行", - "addressLine3": "第三行", + "addressLine1": "第一行地址", + "addressLine2": "第二行地址", + "addressLine3": "第三行地址", "validateAddressLine1": "请输入第一行地址", "validateAddressLine2": "请输入第二行地址", "validateAddressLine3": "请输入第三行地址", diff --git a/src/translations/zh-HK.json b/src/translations/zh-HK.json index b10243c..3d8e8a1 100644 --- a/src/translations/zh-HK.json +++ b/src/translations/zh-HK.json @@ -28,6 +28,8 @@ "submissionSuccess": "申請提交成功", "noMoreThen40Words": "不得超過 40 個字符", "noMoreThen255Words": "不得超過 255 個字符", + "noMoreThenNWords": "{fieldname}不得超過 {num} 個字符", + "atLeastNCharAccount": "{fieldname}最少{num}個字符", "MSG.registerIAmSmart": "你可點擊「智方便」按鈕，系統會自動輸入個人資料，或自行輸入個人資料，以即時啟動 公共啟事提交及繳費系統 帳戶。
如欲使用「智方便」提供個人資料，請先下載「智方便」流動應用程式並登記成為「智方便」用戶。", "MSG.registerPersonal": "需上載身份證明文件數碼檔案以進行網上申請。
如：香港身份證; 護照; 中國內地身份證; 專業執業証書等", @@ -199,7 +201,7 @@ "verifyFail": "驗證失敗，請聯絡相關的系統管理員協助。", "validVerify": "請輸入有效驗證", "requiredValid": "請輸入有效的", - "require": "請輸入", + "require": "請輸入{fieldname}", "number": "號碼", "noSpecialCharacter": "號碼不包含特殊字符", "noSpace": "號碼不包含空格", @@ -209,9 +211,9 @@ "businessRegCertValidityDate": "商業登記證有效日期", "pleaseFillInBusinessRegCertValidityDate": "請輸入商業登記證有效日期", "formAddress": "地址", - "addressLine1": "第一行", - "addressLine2": "第二行", - "addressLine3": "第三行", + "addressLine1": "第一行地址", + "addressLine2": "第二行地址", + "addressLine3": "第三行地址", "validateAddressLine1": "請輸入第一行地址", "validateAddressLine2": "請輸入第二行地址", "validateAddressLine3": "請輸入第三行地址",