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