update district

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) => <TextField error={Boolean(districtErrStr != "")} {...params} placeholder={intl.formatMessage({id: 'region'})}
+                                            renderInput={(params) => <TextField error={checkDistrict} {...params} placeholder={intl.formatMessage({id: 'region'})}
                                             />}
                                         />
                                         <Autocomplete
@@ -1076,7 +1102,7 @@ const BusCustomFormWizard = (props) => {
                                                 {formik.errors.address3}
                                             </FormHelperText>
                                         )}
-                                         {districtErrStr!= "" && (
+                                         {checkDistrict && (
                                             <FormHelperText error >
                                                 {districtErrStr}
                                             </FormHelperText>

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}
                                                         />
                                                     </Stack>
@@ -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) => <TextField error={Boolean(districtErrStr != "")} {...params} placeholder={intl.formatMessage({ id: 'region' })}
+                                            renderInput={(params) => <TextField error={checkDistrict} {...params} placeholder={intl.formatMessage({ id: 'region' })}
                                             />}
                                         />
                                         <Autocomplete
@@ -1420,7 +1471,7 @@ const CustomFormWizard = (props) => {
                                                 {formik.errors.address3}
                                             </FormHelperText>
                                         )}
-                                        {districtErrStr != "" && (
+                                        {checkDistrict && (
                                             <FormHelperText error >
                                                 {districtErrStr}
                                             </FormHelperText>

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) => <TextField error={Boolean(districtErrStr != "")} {...params} placeholder={intl.formatMessage({ id: 'region' })}
+                                            renderInput={(params) => <TextField error={checkDistrict} {...params} placeholder={intl.formatMessage({ id: 'region' })}
                                             />}
                                         />
                                         <Autocomplete
@@ -631,7 +655,7 @@ const CustomFormWizard = (props) => {
                                                 {formik.errors.address3}
                                             </FormHelperText>
                                         )}
-                                        {districtErrStr != "" && (
+                                        {checkDistrict && (
                                             <FormHelperText error >
                                                 {districtErrStr}
                                             </FormHelperText>