TPS
/
halkbank_shahsyotag_frontend
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reg form validations

This commit is contained in:
VividTruthKeeper 2023-06-08 18:14:26 +05:00
parent 40bab79118
commit cfb2dea1a6
2 changed files with 224 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
package-lock.json generated
View File

@ -6018,6 +6018,11 @@
}
}
},
"node_modules/debug/node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
},
"node_modules/decamelize": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
@ -11656,9 +11661,9 @@
}
},
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
},
"node_modules/multicast-dns": {
"version": "6.2.3",
@ -14948,11 +14953,6 @@
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
},
"node_modules/send/node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
},
"node_modules/serialize-javascript": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
@ -21703,6 +21703,13 @@
"integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
"requires": {
"ms": "2.1.2"
},
"dependencies": {
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
}
}
},
"decamelize": {
@ -25820,9 +25827,9 @@
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
},
"multicast-dns": {
"version": "6.2.3",
@ -28089,11 +28096,6 @@
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
}
}
},
"ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
}
}
},

285
src/components/sign/RegForm.js
View File

@ -3,6 +3,8 @@ import React, { useState, useEffect, useRef, useContext } from "react";
import { useNavigate } from "react-router-dom";
import { UserContext } from "../../backend/UserContext";
import ReCAPTCHA from "react-google-recaptcha";
import ms from "ms";
import moment from "moment/moment";
// IMPORT IMAGES
import up from "../../icons/clipboard-white.svg";
@ -119,6 +121,14 @@ const RegForm = () => {
}
}, [user, navigate]);
useEffect(() => {
const inputDate = document.querySelector("#date");
inputDate.min = new Date(Date.now() - 504911232000)
.toISOString()
.split("T")[0];
inputDate.max = new Date().toISOString().split("T")[0];
console.log(inputDate.max);
}, []);
return (
<section className="reg">
<LogoBg />
@ -166,6 +176,23 @@ const RegForm = () => {
}
}}
/>
{validateTop ? (
<span
className={
inputValid.surname ? "pass-check" : "pass-check active"
}
>
{locale === "TKM"
? "Familiýasy gerek"
: locale === "РУС"
? "Требуется фамилия"
: locale === "ENG"
? "Surname is required"
: "Familiýasy gerek"}
</span>
) : (
""
)}
</div>
<div className="reg-input-block">
<label htmlFor="name">
@ -194,6 +221,23 @@ const RegForm = () => {
}
}}
/>
{validateTop ? (
<span
className={
inputValid.name ? "pass-check" : "pass-check active"
}
>
{locale === "TKM"
? "Ady gerek"
: locale === "РУС"
? "Требуется фамилия"
: locale === "ENG"
? "Name is required"
: "Ady gerek"}
</span>
) : (
""
)}
</div>
<div className="reg-input-block">
<label htmlFor="fname">
@ -222,6 +266,23 @@ const RegForm = () => {
}
}}
/>
{validateTop ? (
<span
className={
inputValid.fathers ? "pass-check" : "pass-check active"
}
>
{locale === "TKM"
? "Atasynyň ady gerek"
: locale === "РУС"
? "Требуется фамилия"
: locale === "ENG"
? "Middle name is required"
: "Atasynyň ady gerek"}
</span>
) : (
""
)}
</div>
<div className="reg-input-block">
<label htmlFor="date">
@ -241,8 +302,6 @@ const RegForm = () => {
placeholder="дд / мм / гггг"
id="date"
required
min="1900-01-01"
max={getDate(18)}
onChange={(e) => {
setValidateTop(true);
if (e.target.value !== "") {
@ -253,83 +312,117 @@ const RegForm = () => {
}}
/>
</div>
<div className="reg-input-block split">
<div className="split-block">
<label htmlFor="serie">
{locale === "TKM"
? "Seriýa-I"
: locale === "РУС"
? "Серия-I"
: locale === "ENG"
? "Series-I"
: "Seriýa-I"}
<span>*</span>
</label>
<CustomSelect
items={["I", "II", "III", "IV"]}
blockName={"select-block"}
elName={"select-el"}
customId={"serie"}
name={"passport-serie"}
stateSetter={(e) => {
setPpSerie(e);
}}
eTarget={true}
placeholder="I"
/>
</div>
<div className="split-block">
<label htmlFor="reg">
{locale === "TKM"
? "Seriýa-II"
: locale === "РУС"
? "Серия-II"
: locale === "ENG"
? "Series-II"
: "Seriýa-II"}
<span>*</span>
</label>
<CustomSelect
items={["AŞ", "AH", "DZ", "MR", "BN", "LB"]}
blockName={"select-block"}
elName={"select-el"}
customId={"reg"}
name={"passport-reg"}
stateSetter={(e) => {
setPpPrefix(e);
}}
eTarget={true}
placeholder="AŞ"
/>
</div>
<div className="split-block">
<label htmlFor="num">
{locale === "TKM"
? "Pasportyň belgisi"
: locale === "РУС"
? "Номер паспорта"
: locale === "ENG"
? "Passport number"
: "Pasportyň belgisi"}
<span>*</span>
</label>
<input
autoComplete="true"
type="text"
name="num"
maxLength={6}
placeholder="212121"
id="num"
required
onChange={(e) => {
setValidateTop(true);
if (e.target.value !== "") {
setInputValid({ ...inputValid, ppNum: e.target.value });
} else {
setInputValid({ ...inputValid, ppNum: null });
}
}}
/>
<div className="reg-input-block">
<div
style={{
display: "flex",
flexDirection: "column",
gap: "1.4rem",
}}
>
<div className="split">
<div className="split-block">
<label htmlFor="serie">
{locale === "TKM"
? "Seriýa-I"
: locale === "РУС"
? "Серия-I"
: locale === "ENG"
? "Series-I"
: "Seriýa-I"}
<span>*</span>
</label>
<CustomSelect
items={["I", "II", "III", "IV"]}
blockName={"select-block"}
elName={"select-el"}
customId={"serie"}
name={"passport-serie"}
stateSetter={(e) => {
setPpSerie(e);
}}
eTarget={true}
placeholder="I"
/>
</div>
<div className="split-block">
<label htmlFor="reg">
{locale === "TKM"
? "Seriýa-II"
: locale === "РУС"
? "Серия-II"
: locale === "ENG"
? "Series-II"
: "Seriýa-II"}
<span>*</span>
</label>
<CustomSelect
items={["AŞ", "AH", "DZ", "MR", "BN", "LB"]}
blockName={"select-block"}
elName={"select-el"}
customId={"reg"}
name={"passport-reg"}
stateSetter={(e) => {
setPpPrefix(e);
}}
eTarget={true}
placeholder="AŞ"
/>
</div>
<div className="split-block">
<label htmlFor="num">
{locale === "TKM"
? "Pasportyň belgisi"
: locale === "РУС"
? "Номер паспорта"
: locale === "ENG"
? "Passport number"
: "Pasportyň belgisi"}
<span>*</span>
</label>
<input
autoComplete="true"
type="text"
name="num"
maxLength={6}
placeholder="212121"
id="num"
required
onChange={(e) => {
setValidateTop(true);
if (e.target.value !== "") {
setInputValid({
...inputValid,
ppNum: e.target.value,
});
} else {
setInputValid({ ...inputValid, ppNum: null });
}
}}
/>
</div>
</div>
<div>
{validateTop ? (
<span
className={
ppSerie && ppPrefix && inputValid.ppNum
? "pass-check"
: "pass-check active"
}
>
{locale === "TKM"
? "Bu maglumatlar zerurdyr"
: locale === "РУС"
? "Эта информация обязательна"
: locale === "ENG"
? "This information is required"
: "Bu maglumatlar zerurdyr"}
</span>
) : (
""
)}
</div>
</div>
</div>
<div className="reg-input-block">
@ -359,6 +452,23 @@ const RegForm = () => {
}
}}
/>
{validateTop ? (
<span
className={
inputValid.ppAddr ? "pass-check" : "pass-check active"
}
>
{locale === "TKM"
? "Bu meýdan hökmanydyr"
: locale === "РУС"
? "Это поле обязательно"
: locale === "ENG"
? "This field is required"
: "Bu meýdan hökmanydyr"}
</span>
) : (
""
)}
</div>
<div className="reg-input-block">
<label htmlFor="address">
@ -725,6 +835,23 @@ const RegForm = () => {
setInputValid({ ...inputValid, captcha: true });
}}
/>
{validateBottom ? (
<span
className={
inputValid.captcha ? "pass-check" : "pass-check active"
}
>
{locale === "TKM"
? "Captcha gerek"
: locale === "РУС"
? "Капча требуется"
: locale === "ENG"
? "Captcha is required"
: "Captcha gerek"}
</span>
) : (
""
)}
</div>
{locale === "TKM" ? (
<h2>