Merge pull request #64 from CMP26Projects/validations

Validations
CMP26Projects · Dec 29, 2023 · dec8c90 · dec8c90
2 parents 7d4fc08 + bca8abe
commit dec8c90
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 14 deletions.
diff --git 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 (
     <label className="input input--text">
@@ -21,6 +23,8 @@ function TextInput({
         value={value}
         onChange={onChange}
         required={required}
+        pattern={pattern}
+        onInvalid={onInvalid}
       />
     </label>
   );

diff --git 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}
                 />
               </div>
@@ -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}
                 />
               </div>
@@ -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}
                 />
               </div>

diff --git 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/login/logIn.jsx b/client/src/components/login/logIn.jsx
@@ -49,7 +49,9 @@ export default function LogIn() {
             name="email"
             value={email}
             placeholder="[email protected]"
-            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}
           />
           <TextInput

diff --git a/client/src/components/signup/signUp.jsx b/client/src/components/signup/signUp.jsx
@@ -80,7 +80,9 @@ export default function SignUp() {
               name="firstName"
               value={firstName}
               placeholder="أكتب أسمك الاول"
-              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}
             />
             <TextInput
@@ -89,7 +91,9 @@ export default function SignUp() {
               name="middleName"
               value={middleName}
               placeholder="أكتب أسمك المتوسط"
-              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}
             />
             <TextInput
@@ -98,7 +102,9 @@ export default function SignUp() {
               name="lastName"
               value={lastName}
               placeholder="أكتب أسمك الأخير"
-              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}
             />
           </div>
@@ -110,7 +116,9 @@ export default function SignUp() {
               name="email"
               value={email}
               placeholder="[email protected]"
-              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}
             />
             <TextInput
@@ -140,7 +148,9 @@ export default function SignUp() {
               name="phone"
               value={phone}
               placeholder="أكتب رقم هاتفك"
-              onChange={(e) => 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}
             />
             <RadioInput

diff --git 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}
               />
             </div>
@@ -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}
               />
             </div>
@@ -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}
               />
             </div>