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}
/>