Merge pull request #2333 from akash70629/first-name

🛠️ FIX : First Name Field validation in Contact us page
codervivek5 · Oct 17, 2024 · 1be5f90 · 1be5f90
2 parents f5f67e6 + 60d49df
commit 1be5f90
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/src/User/pages/Contacts/Contact.jsx b/src/User/pages/Contacts/Contact.jsx
@@ -100,7 +100,13 @@ function ContactPage() {
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
               <div>
                 <label htmlFor="fname" className="block mb-2">First Name</label>
-                <input type="text" id="fname" className="w-full p-2 border rounded" placeholder="Enter your first name" minLength={3} required/>
+                <input type="text" id="fname" className="w-full p-2 border rounded" placeholder="Enter your first name" minLength={3} required pattern="[a-zA-Z ]+"
+              onInvalid={(e) => {
+                e.target.setCustomValidity('Numbers and Symbols are not allowed.');
+              }}
+              onInput={(e) => {
+                e.target.setCustomValidity('');
+              }}/>
               </div>
               <div>
                 <label htmlFor="lname" className="block mb-2">Last Name</label>