diff --git a/src/pages/authentication/auth-forms/BusCustomFormWizard.js b/src/pages/authentication/auth-forms/BusCustomFormWizard.js index ad2329a..fd6a419 100644 --- a/src/pages/authentication/auth-forms/BusCustomFormWizard.js +++ b/src/pages/authentication/auth-forms/BusCustomFormWizard.js @@ -104,6 +104,10 @@ const BusCustomFormWizard = (props) => { const email = document.getElementById("email-login") const [checkEmail, setCheckEmail] = useState(false) const [checkEmailBlur, setCheckEmailBlur] = useState(false) + + const district = document.getElementById("address4-combo") + const [checkDistrict, setCheckDistrict] = useState(false) + const [checkDistrictBlur, setCheckDistrictBlur] = useState(false) const [districtErrStr, setDistrictErrStr] = useState("") const address4ComboList = ComboData.district; @@ -164,13 +168,32 @@ const BusCustomFormWizard = (props) => { } }, [checkEmailBlur]) - useEffect(()=>{ + useEffect(() => { + if (district) { + district.addEventListener("blur", function () { + setCheckDistrictBlur(true) + }) + } + }, [district]) + + useEffect(() => { + if (checkDistrictBlur) { + handleCheckDistrict() + setCheckDistrictBlur(false) + } + }, [checkDistrictBlur]) + + const handleCheckDistrict = async () => { setDistrictErrStr(""); - if(selectedAddress5?.type === "hongKong"){ - if(selectedAddress4 ==null || selectedAddress4 == ""|| selectedAddress4 == {}) + if (selectedAddress5?.type === "hongKong") { + if (selectedAddress4 == null || selectedAddress4 == "" || selectedAddress4 == {}){ + setCheckDistrict(true) setDistrictErrStr(getRequiredErrStr("district")) + }else { + setCheckDistrict(false) + } } - },[selectedAddress4, selectedAddress5]) + } function getRequiredErrStr(fieldname){ return displayErrorMsg(intl.formatMessage({ id: 'require'},{fieldname:fieldname?intl.formatMessage({ id: fieldname}):""})); @@ -219,7 +242,10 @@ const BusCustomFormWizard = (props) => { handlePhone(data.phone) && handleUserName(data.username) && handleBrNo(data.brNo) && - !checkUsername + handleCheckDistrict()&& + !checkUsername&& + !checkEmail&& + !checkDistrict ) { setisValid(true) return isValid @@ -1004,7 +1030,7 @@ const BusCustomFormWizard = (props) => { options={address4ComboList} disabled={checkCountry} // error={Boolean(districtErrStr!="")} - onBlur={formik.handleBlur} + // onBlur={formik.handleBlur} getOptionLabel={(option) => option.type? intl.formatMessage({ id: option.type }) : ""} onChange={(event, newValue) => { setSelectedAddress4(newValue); @@ -1012,7 +1038,7 @@ const BusCustomFormWizard = (props) => { sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address4-combo": { padding: "0px 0px 0px 3px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }} - renderInput={(params) => } /> { {formik.errors.address3} )} - {districtErrStr!= "" && ( + {checkDistrict && ( {districtErrStr} diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js index 7196e18..ce9baca 100644 --- a/src/pages/authentication/auth-forms/CustomFormWizard.js +++ b/src/pages/authentication/auth-forms/CustomFormWizard.js @@ -103,20 +103,29 @@ const CustomFormWizard = (props) => { const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false); const [isValid, setisValid] = useState(false); const [checkCountry, setCheckCountry] = useState(false); + const username = document.getElementById("username-login") const [checkUsername, setCheckUsername] = useState(false); const [checkUsernameBlur, setCheckUsernameBlur] = useState(false) + const idDocNumber = document.getElementById("idNo-login") const [checkIdDocNumber, setCheckIdDocNumber] = useState(false) const [checkIdDocNumberBlur, setCheckIdDocNumberBlur] = useState(false) + const [idDocHKIDNumber, setIdDocHKIDNumber] = useState(document.getElementById("idNo-hkid-login")) const [checkIdDocHKIDNumberBlur, setCheckIdDocHKIDNumberBlur] = useState(false) + const [checkDigit, setCheckDigit] = useState(document.getElementById("checkDigit-login")) const [checkCheckDigitBlur, setCheckCheckDigitBlur] = useState(false) const [checkHKIdDocWithCheckDigit, setCheckHKIdDocWithCheckDigit] = useState(false) + const email = document.getElementById("email-login") const [checkEmail, setCheckEmail] = useState(false) const [checkEmailBlur, setCheckEmailBlur] = useState(false) + + const district = document.getElementById("address4-combo") + const [checkDistrict, setCheckDistrict] = useState(false) + const [checkDistrictBlur, setCheckDistrictBlur] = useState(false) const [districtErrStr, setDistrictErrStr] = useState("") const idDocTypeComboList = ComboData.idDocType; @@ -151,7 +160,20 @@ const CustomFormWizard = (props) => { } const handleCheckIdDocNumber = async () => { - if (values?.idNo) { + if (values?.idNo&&values?.checkDigit !="") { + if (handleIdNo(values.idNo, selectedIdDocType.type, values.checkDigit)){ + const response = await axios.post(`${POST_IDNO}`, { + i1: values.idNo, + }) + console.log(response.data.Vaild) + setCheckIdDocNumber(response.data.Vaild === false) + return response.data.Vaild === false + } + } + } + + const handleCheckIdDocNumberbyCheckDigit = async () => { + if (values?.checkDigit) { if (handleIdNo(values.idNo, selectedIdDocType.type, values.checkDigit)){ const response = await axios.post(`${POST_IDNO}`, { i1: values.idNo, @@ -169,11 +191,23 @@ const CustomFormWizard = (props) => { const response = await axios.post(`${POST_USER_EMAIL}`, { e1: values.email, }) - setCheckEmail((Number(response.data[0]) === 1)) + setCheckEmail((Number(response.data[0]) === 1)) return Number(response.data[0]) === 1 } } } + + const handleCheckDistrict = async () => { + setDistrictErrStr(""); + if (selectedAddress5?.type === "hongKong") { + if (selectedAddress4 == null || selectedAddress4 == "" || selectedAddress4 == {}){ + setCheckDistrict(true) + setDistrictErrStr(getRequiredErrStr("district")) + }else { + setCheckDistrict(false) + } + } + } useEffect(() => { if (username) { @@ -230,7 +264,7 @@ const CustomFormWizard = (props) => { useEffect(() => { if (checkCheckDigitBlur) { - handleCheckIdDocNumber() + handleCheckIdDocNumberbyCheckDigit() setCheckCheckDigitBlur(false) } }, [checkCheckDigitBlur]) @@ -249,6 +283,21 @@ const CustomFormWizard = (props) => { setCheckEmailBlur(false) } }, [checkEmailBlur]) + + useEffect(() => { + if (district) { + district.addEventListener("blur", function () { + setCheckDistrictBlur(true) + }) + } + }, [district]) + + useEffect(() => { + if (checkDistrictBlur) { + handleCheckDistrict() + setCheckDistrictBlur(false) + } + }, [checkDistrictBlur]) const onCaptchaChange = () => { HttpUtils.post({ @@ -290,9 +339,11 @@ const CustomFormWizard = (props) => { handleIdNo(data.idNo, selectedIdDocType.type, data.checkDigit) && handlePhone(data.phone) && handleUsername(data.username) && + handleCheckDistrict()&& !checkUsername && !checkEmail && - !checkIdDocNumber + !checkIdDocNumber&& + !checkDistrict ) { setisValid(true) return isValid @@ -389,13 +440,13 @@ 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(() => { + // setDistrictErrStr(""); + // if (selectedAddress5?.type === "hongKong") { + // if (selectedAddress4 == null || selectedAddress4 == "" || selectedAddress4 == {}) + // setDistrictErrStr(getRequiredErrStr("district")) + // } + // }, [selectedAddress4, selectedAddress5]) useEffect(() => { props.step == 2 ? _onSubmit() : null; @@ -1091,7 +1142,7 @@ const CustomFormWizard = (props) => { placeholder={intl.formatMessage({ id: 'idDocNumber' })} fullWidth sx={{ mr: 1 }} - error={Boolean(formik.touched.idNo && formik.errors.idNo && checkIdDocNumber && checkHKIdDocWithCheckDigit)} + error={Boolean(formik.touched.idNo && formik.errors.idNo || checkIdDocNumber)} onBlur={formik.handleBlur} inputProps={{ maxLength: selectedIdDocType.type === 'HKID' ? 8 : 18, @@ -1151,7 +1202,7 @@ const CustomFormWizard = (props) => { }, }} fullWidth - error={Boolean(formik.touched.checkDigit && formik.errors.checkDigit)} + error={Boolean(formik.touched.checkDigit && formik.errors.checkDigit || checkIdDocNumber)} onBlur={formik.handleBlur} /> @@ -1181,7 +1232,7 @@ const CustomFormWizard = (props) => { placeholder={intl.formatMessage({ id: 'idDocNumber' })} fullWidth sx={{ mr: 1 }} - error={Boolean(formik.touched.idNo && formik.errors.idNo && checkIdDocNumber)} + error={Boolean(formik.touched.idNo && formik.errors.idNo || checkIdDocNumber)} onBlur={formik.handleBlur} inputProps={{ maxLength: 18, @@ -1345,7 +1396,7 @@ const CustomFormWizard = (props) => { options={ComboData.district} disabled={checkCountry} // error={Boolean(districtErrStr != "")} - onBlur={formik.handleBlur} + // onBlur={formik.handleBlur} getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""} onChange={(event, newValue) => { setSelectedAddress4(newValue); @@ -1355,7 +1406,7 @@ const CustomFormWizard = (props) => { "#address4-combo": { padding: "0px 0px 0px 3px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }} - renderInput={(params) => } /> { {formik.errors.address3} )} - {districtErrStr != "" && ( + {checkDistrict && ( {districtErrStr} diff --git a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js index ad11b29..a6bf6b9 100644 --- a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js +++ b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js @@ -65,6 +65,9 @@ const CustomFormWizard = (props) => { const email = document.getElementById("email-login") const [checkEmail, setCheckEmail] = useState(false) const [checkEmailBlur, setCheckEmailBlur] = useState(false) + const district = document.getElementById("address4-combo") + const [checkDistrict, setCheckDistrict] = useState(false) + const [checkDistrictBlur, setCheckDistrictBlur] = useState(false) const [districtErrStr, setDistrictErrStr] = useState("") const address4ComboList = ComboData.district; @@ -99,12 +102,31 @@ const CustomFormWizard = (props) => { }; useEffect(() => { + if (district) { + district.addEventListener("blur", function () { + setCheckDistrictBlur(true) + }) + } + }, [district]) + + useEffect(() => { + if (checkDistrictBlur) { + handleCheckDistrict() + setCheckDistrictBlur(false) + } + }, [checkDistrictBlur]) + + const handleCheckDistrict = async () => { setDistrictErrStr(""); if (selectedAddress5?.type === "hongKong") { - if (selectedAddress4 == null || selectedAddress4 == "" || selectedAddress4 == {}) + if (selectedAddress4 == null || selectedAddress4 == "" || selectedAddress4 == {}){ + setCheckDistrict(true) setDistrictErrStr(getRequiredErrStr("district")) + }else { + setCheckDistrict(false) + } } - }, [selectedAddress4, selectedAddress5]) + } function getRequiredErrStr(fieldname) { return displayErrorMsg(intl.formatMessage({ id: 'require' }, { fieldname: fieldname ? intl.formatMessage({ id: fieldname }) : "" })); @@ -249,7 +271,9 @@ const CustomFormWizard = (props) => { handleEmail(data.email) && handlePhone(data.phone) && handleCaptcha(data.captchaField) && - !checkEmail + handleCheckDistrict()&& + !checkEmail&& + !checkDistrict ) { setisValid(true) return isValid @@ -588,7 +612,7 @@ const CustomFormWizard = (props) => { setSelectedAddress4(newValue); }} sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }} - renderInput={(params) => } /> { {formik.errors.address3} )} - {districtErrStr != "" && ( + {checkDistrict && ( {districtErrStr}