|
|
@@ -303,13 +303,13 @@ const CustomFormWizard = (props) => { |
|
|
|
selectedAddress4, selectedAddress5, |
|
|
|
termsAndConAccept, termsAndConNotAccept, fileList]) |
|
|
|
|
|
|
|
useEffect(()=>{ |
|
|
|
useEffect(() => { |
|
|
|
setDistrictErrStr(""); |
|
|
|
if(selectedAddress5?.type === "hongKong"){ |
|
|
|
if(selectedAddress4 ==null || selectedAddress4 == ""|| selectedAddress4 == {}) |
|
|
|
if (selectedAddress5?.type === "hongKong") { |
|
|
|
if (selectedAddress4 == null || selectedAddress4 == "" || selectedAddress4 == {}) |
|
|
|
setDistrictErrStr(getRequiredErrStr("district")) |
|
|
|
} |
|
|
|
},[selectedAddress4, selectedAddress5]) |
|
|
|
}, [selectedAddress4, selectedAddress5]) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
props.step == 2 ? _onSubmit() : null; |
|
|
@@ -541,11 +541,11 @@ 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 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}):""})); |
|
|
|
function getRequiredErrStr(fieldname) { |
|
|
|
return displayErrorMsg(intl.formatMessage({ id: 'require' }, { fieldname: fieldname ? intl.formatMessage({ id: fieldname }) : "" })); |
|
|
|
} |
|
|
|
|
|
|
|
const formik = useFormik({ |
|
|
@@ -581,14 +581,17 @@ const CustomFormWizard = (props) => { |
|
|
|
.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(40, getMaxErrStr(40)).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireEnglishName' }))), |
|
|
|
chName: yup.string().max(6, getMaxErrStr(6)).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireChineseName' }))), |
|
|
|
enName: yup.string().max(40, getMaxErrStr(40)), |
|
|
|
chName: yup.string().max(6, getMaxErrStr(6)).when('enName', { |
|
|
|
is: (enName) => enName?false:true, |
|
|
|
then: yup.string().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' })}`)) |
|
|
|
idNo: yup.string().required(getRequiredErrStr('number')) |
|
|
|
.matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({ id: 'noSpecialCharacter' })}`) }) |
|
|
|
.matches(/^\S*$/, { message: displayErrorMsg(`${selectedIdDocInputType}${intl.formatMessage({ id: 'noSpace' })}`) }) |
|
|
|
.test('checkIDCardFormat', displayErrorMsg(`${intl.formatMessage({ id: 'requiredValid' })}${selectedIdDocInputType}${intl.formatMessage({ id: 'number' })}`), function (value) { |
|
|
@@ -648,7 +651,7 @@ const CustomFormWizard = (props) => { |
|
|
|
// 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().max(5, getMaxErrStr(5)).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('請輸入有效驗證')), |
|
|
|
}), |
|
|
|
}); |
|
|
|
|
|
|
@@ -934,7 +937,7 @@ const CustomFormWizard = (props) => { |
|
|
|
/> |
|
|
|
{formik.touched.idDocType && ( |
|
|
|
selectedIdDocType === null || selectedIdDocType?.type == null ? |
|
|
|
<FormHelperText error id="helper-text-idDocType-signup" sx={{fontSize:16,fontWeight: 'bold',}}> |
|
|
|
<FormHelperText error id="helper-text-idDocType-signup" sx={{ fontSize: 16, fontWeight: 'bold', }}> |
|
|
|
<FormattedMessage id="requireIdDocType" /> |
|
|
|
</FormHelperText> : '' |
|
|
|
)} |
|
|
@@ -1067,12 +1070,17 @@ const CustomFormWizard = (props) => { |
|
|
|
} |
|
|
|
</Grid> |
|
|
|
</Grid> |
|
|
|
<Grid item xs={12} md={12}> |
|
|
|
<Typography variant="subtitle1"> |
|
|
|
<FormattedMessage id="registerNameLabel" /> |
|
|
|
</Typography> |
|
|
|
</Grid> |
|
|
|
<Grid item xs={12} md={6}> |
|
|
|
<Stack spacing={1}> |
|
|
|
<InputLabel htmlFor="enName-signup"> |
|
|
|
<Typography variant="pnspsFormHeader"> |
|
|
|
<FormattedMessage id="userEnglishName" /> |
|
|
|
{selectedIdDocType.type === "CNID" ? "" : <span style={{ color: '#f10000' }}>*</span>} |
|
|
|
{selectedIdDocType.type === "CNID" ? "" : <span style={{ color: '#f10000' }}></span>} |
|
|
|
</Typography> |
|
|
|
</InputLabel> |
|
|
|
<OutlinedInput |
|
|
@@ -1105,7 +1113,7 @@ const CustomFormWizard = (props) => { |
|
|
|
<InputLabel htmlFor="chName-signup"> |
|
|
|
<Typography variant="pnspsFormHeader"> |
|
|
|
<FormattedMessage id="userChineseName" /> |
|
|
|
<span style={{ color: '#f10000' }}>*</span> |
|
|
|
<span style={{ color: '#f10000' }}></span> |
|
|
|
</Typography> |
|
|
|
</InputLabel> |
|
|
|
<OutlinedInput |
|
|
@@ -1199,7 +1207,7 @@ const CustomFormWizard = (props) => { |
|
|
|
value={selectedAddress4} |
|
|
|
options={ComboData.district} |
|
|
|
disabled={checkCountry} |
|
|
|
error={Boolean(districtErrStr!="")} |
|
|
|
error={Boolean(districtErrStr != "")} |
|
|
|
onBlur={formik.handleBlur} |
|
|
|
getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""} |
|
|
|
onChange={(event, newValue) => { |
|
|
@@ -1252,7 +1260,7 @@ const CustomFormWizard = (props) => { |
|
|
|
{formik.errors.address3} |
|
|
|
</FormHelperText> |
|
|
|
)} |
|
|
|
{districtErrStr!= "" && ( |
|
|
|
{districtErrStr != "" && ( |
|
|
|
<FormHelperText error > |
|
|
|
{districtErrStr} |
|
|
|
</FormHelperText> |
|
|
@@ -1685,8 +1693,8 @@ const CustomFormWizard = (props) => { |
|
|
|
<FormattedMessage id="idDocType" />: |
|
|
|
</Typography> |
|
|
|
<Typography variant="pnspsFormHeader" name="preview-idDocType"> |
|
|
|
{intl.formatMessage({ id: selectedIdDocType?.label??" " })} |
|
|
|
|
|
|
|
{intl.formatMessage({ id: selectedIdDocType?.label ?? " " })} |
|
|
|
|
|
|
|
</Typography> |
|
|
|
</Stack> |
|
|
|
</Grid> |
|
|
|