From add3758c233b7aca859c7bfacce648e200c2515e Mon Sep 17 00:00:00 2001 From: akram Date: Fri, 29 Dec 2023 15:53:47 +0200 Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20feat:=20Make=20the=20validation?= =?UTF-8?q?s=20of=20the=20signUp=20and=20logIn=20forms?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/common/Inputs.jsx | 4 ++++ client/src/components/login/logIn.jsx | 4 +++- client/src/components/signup/signUp.jsx | 20 +++++++++++++++----- 3 files changed, 22 insertions(+), 6 deletions(-) diff --git a/client/src/components/common/Inputs.jsx b/client/src/components/common/Inputs.jsx index 8e28c269..bfc1cc82 100644 --- a/client/src/components/common/Inputs.jsx +++ b/client/src/components/common/Inputs.jsx @@ -10,6 +10,8 @@ function TextInput({ onChange, placeholder, required, + pattern, + onInvalid, }) { return ( ); diff --git a/client/src/components/login/logIn.jsx b/client/src/components/login/logIn.jsx index 96a9199d..d70abf85 100644 --- a/client/src/components/login/logIn.jsx +++ b/client/src/components/login/logIn.jsx @@ -49,7 +49,9 @@ export default function LogIn() { name="email" value={email} placeholder="regular@gmail.com" - onChange={(e) => setEmail(e.target.value)} + onChange={(e) => {setEmail(e.target.value); e.target.setCustomValidity('');}} + pattern="^[a-zA-Z0-9._%\+\-]+@[a-zA-Z0-9._%\+\-]+\.[a-z]{2,}$" + onInvalid={(e) => e.target.setCustomValidity('الرجاء إدخال بريد إليكتروني صحيح')} required={true} /> setFirstName(e.target.value)} + onChange={(e) => {setFirstName(e.target.value); e.target.setCustomValidity('');}} + pattern="^[\u0621-\u064Aa-zA-Z]+$" + onInvalid={(e) => e.target.setCustomValidity('الرجاء إدخال الاسم الاول فقط (باللغة العربية او الانجليزية)')} required={true} /> setMiddleName(e.target.value)} + onChange={(e) => {setMiddleName(e.target.value); e.target.setCustomValidity('');}} + pattern="^[\u0621-\u064Aa-zA-Z]+$" + onInvalid={(e) => e.target.setCustomValidity('الرجاء إدخال الاسم الاوسط فقط (باللغة العربية او الانجليزية)')} required={true} /> setLastName(e.target.value)} + onChange={(e) => {setLastName(e.target.value); e.target.setCustomValidity('');}} + pattern="^[\u0621-\u064Aa-zA-Z]+$" + onInvalid={(e) => e.target.setCustomValidity('الرجاء إدخال الاسم الأخير فقط (باللغة العربية او الانجليزية)')} required={true} /> @@ -110,7 +116,9 @@ export default function SignUp() { name="email" value={email} placeholder="some@gmail.com" - onChange={(e) => setEmail(e.target.value)} + onChange={(e) => {setEmail(e.target.value); e.target.setCustomValidity('');}} + pattern="^[a-zA-Z0-9._%\+\-]+@[a-zA-Z0-9._%\+\-]+\.[a-z]{2,}$" + onInvalid={(e) => e.target.setCustomValidity('الرجاء إدخال بريد إليكتروني صحيح')} required={true} /> setPhone(e.target.value)} + onChange={(e) => {setPhone(e.target.value); e.target.setCustomValidity('');}} + pattern="^01[0-9]{9}$" + onInvalid={(e) => e.target.setCustomValidity('الرجاء إدخال رقم هاتف صحيح')} required={true} /> Date: Fri, 29 Dec 2023 16:21:48 +0200 Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=A8=20feat:=20Validate=20most=20of=20?= =?UTF-8?q?the=20remaining=20forms=20in=20the=20system?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/insert-scout/InsertScoutPage.jsx | 12 +++++++++--- client/src/components/insert-sector/InsertSector.jsx | 8 ++++++-- .../src/components/update-scout/UpdateScoutPage.jsx | 12 +++++++++--- 3 files changed, 24 insertions(+), 8 deletions(-) diff --git a/client/src/components/insert-scout/InsertScoutPage.jsx b/client/src/components/insert-scout/InsertScoutPage.jsx index af4674a5..e0f00fcd 100644 --- a/client/src/components/insert-scout/InsertScoutPage.jsx +++ b/client/src/components/insert-scout/InsertScoutPage.jsx @@ -90,7 +90,9 @@ const InsertScoutPage = () => { name="firstname" placeholder="جون" value={firstName} - onChange={(e) => setFirstName(e.target.value)} + onChange={(e) => {setFirstName(e.target.value); e.target.setCustomValidity('');}} + pattern="^[\u0621-\u064Aa-zA-Z]+$" + onInvalid={(e) => e.target.setCustomValidity('الرجاء إدخال الاسم الاول فقط (باللغة العربية او الانجليزية)')} required={true} /> @@ -101,7 +103,9 @@ const InsertScoutPage = () => { name="middlename" placeholder="دوي" value={middleName} - onChange={(e) => setMiddleName(e.target.value)} + onChange={(e) => {setMiddleName(e.target.value); e.target.setCustomValidity('');}} + pattern="^[\u0621-\u064Aa-zA-Z]+$" + onInvalid={(e) => e.target.setCustomValidity('الرجاء إدخال الاسم الاوسط فقط (باللغة العربية او الانجليزية)')} required={true} /> @@ -114,7 +118,9 @@ const InsertScoutPage = () => { name="lastname" placeholder="السيد" value={lastName} - onChange={(e) => setLastName(e.target.value)} + onChange={(e) => {setLastName(e.target.value); e.target.setCustomValidity('');}} + pattern="^[\u0621-\u064Aa-zA-Z]+$" + onInvalid={(e) => e.target.setCustomValidity('الرجاء إدخال الاسم الأخير فقط (باللغة العربية او الانجليزية)')} required={true} /> diff --git a/client/src/components/insert-sector/InsertSector.jsx b/client/src/components/insert-sector/InsertSector.jsx index f3219942..01e9cca3 100644 --- a/client/src/components/insert-sector/InsertSector.jsx +++ b/client/src/components/insert-sector/InsertSector.jsx @@ -65,7 +65,9 @@ export default function InsertSector() { type="text" name="sectorBaseName" value={sectorBaseName} - onChange={(e) => setSectorBaseName(e.target.value)} + onChange={(e) => {setSectorBaseName(e.target.value); e.target.setCustomValidity('');}} + pattern="^[\u0621-\u064Aa-zA-Z]+$" + onInvalid={(e) => e.target.setCustomValidity('الرجاء إدخال أسم القطاع بطريقة صحيحة (بالعربية او الانجليزية)')} placeholder="اسم القطاع" required /> @@ -74,7 +76,9 @@ export default function InsertSector() { type="text" name="sectorSuffixName" value={sectorSuffixName} - onChange={(e) => setSectorSuffixName(e.target.value)} + onChange={(e) => {setSectorSuffixName(e.target.value); e.target.setCustomValidity('');}} + pattern="^[\u0621-\u064Aa-zA-Z]+$" + onInvalid={(e) => e.target.setCustomValidity('الرجاء إدخال رقم القطاع بطريقة صحيحة')} placeholder="مثل: أ, ب, ج" required /> diff --git a/client/src/components/update-scout/UpdateScoutPage.jsx b/client/src/components/update-scout/UpdateScoutPage.jsx index 366325bc..08b2565a 100644 --- a/client/src/components/update-scout/UpdateScoutPage.jsx +++ b/client/src/components/update-scout/UpdateScoutPage.jsx @@ -180,7 +180,9 @@ const UpdateScoutPage = () => { name="firstname" placeholder="جون" value={firstName} - onChange={(e) => setFirstName(e.target.value)} + onChange={(e) => {setFirstName(e.target.value); e.target.setCustomValidity('');}} + pattern="^[\u0621-\u064Aa-zA-Z]+$" + onInvalid={(e) => e.target.setCustomValidity('الرجاء إدخال الاسم الاول فقط (باللغة العربية او الانجليزية)')} required={true} /> @@ -191,7 +193,9 @@ const UpdateScoutPage = () => { name="middlename" placeholder="دوي" value={middleName} - onChange={(e) => setMiddleName(e.target.value)} + onChange={(e) => {setMiddleName(e.target.value); e.target.setCustomValidity('');}} + pattern="^[\u0621-\u064Aa-zA-Z]+$" + onInvalid={(e) => e.target.setCustomValidity('الرجاء إدخال الاسم الاوسط فقط (باللغة العربية او الانجليزية)')} required={true} /> @@ -204,7 +208,9 @@ const UpdateScoutPage = () => { name="lastname" placeholder="السيد" value={lastName} - onChange={(e) => setLastName(e.target.value)} + onChange={(e) => {setLastName(e.target.value); e.target.setCustomValidity('');}} + pattern="^[\u0621-\u064Aa-zA-Z]+$" + onInvalid={(e) => e.target.setCustomValidity('الرجاء إدخال الاسم الأخير فقط (باللغة العربية او الانجليزية)')} required={true} />