Merge pull request #9 from AnshAg111/contactFormValidation

Add contact form to contact page and add validation with toasts
oscfcommunity · Oct 14, 2023 · 4410b6d · 4410b6d
2 parents 17793f3 + 0339448
commit 4410b6d
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 11 deletions.
diff --git a/OSW-frontend/src/components/Contact Us Form/contactUsForm.js b/OSW-frontend/src/components/Contact Us Form/contactUsForm.js
@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import "./contactUsForm.css";
 import { hostname } from "../../hostname";
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 function ContactForm() {
   const [formData, setFormData] = useState({
@@ -15,9 +17,37 @@ function ContactForm() {
     setFormData({ ...formData, [name]: value });
   };
 
+  const validate = () => {
+    const regexEmail = /^[\w_.]+@[a-zA-Z]+\.[a-zA-Z]{2,4}$/i;
+    const regexName = /^[A-Za-z\s]+$/gi
+    const name=formData.name.trim();
+    if (!regexName.test(name)){
+      toast('Invalid Name Format', {
+        type: 'warning',
+        position: 'top-center',
+        autoClose: 3000,
+        closeButton: true
+      });
+      return false;
+    }
+
+    if (!regexEmail.test(formData.email)){
+      toast('Invalid Email Format', {
+        type: 'warning',
+        position: 'top-center',
+        autoClose: 3000,
+        closeButton: true
+      });
+      return false;
+    }
+    return true;
+  }
+
   const handleSubmit = async (e) => {
     e.preventDefault();
-
+    if (validate()){
+      return;
+    }
     try {
       const response = await fetch(`${hostname}/user/contactus`, {
         method: "POST",
@@ -48,6 +78,7 @@ function ContactForm() {
 
   return (
     <section className="mb-4">
+      <ToastContainer />
       <h2 className="h1-responsive font-weight-bold text-center my-4">
         Contact us
       </h2>
@@ -63,65 +94,74 @@ function ContactForm() {
             <div className="row">
               <div className="col-md-6">
                 <div className="md-form mb-0">
+                  <label htmlFor="name" className="">
+                    Your name
+                  </label>
                   <input
                     type="text"
                     id="name"
                     name="name"
                     className="form-control"
+                    placeholder="Your name"
                     value={formData.name}
                     onChange={handleChange}
+                    required
                   />
-                  <label htmlFor="name" className="">
-                    Your name
-                  </label>
                 </div>
               </div>
               <div className="col-md-6">
                 <div className="md-form mb-0">
+                  <label htmlFor="email" className="">
+                    Your email
+                  </label>
                   <input
                     type="text"
                     id="email"
                     name="email"
+                    placeholder="e.g.:abc123@gmail.com"
                     className="form-control"
                     value={formData.email}
                     onChange={handleChange}
+                    required
                   />
-                  <label htmlFor="email" className="">
-                    Your email
-                  </label>
                 </div>
               </div>
             </div>
             <div className="row">
               <div className="col-md-12">
                 <div className="md-form mb-0">
+                  <label htmlFor="subject" className="">
+                    Subject
+                  </label>
                   <input
                     type="text"
                     id="subject"
                     name="subject"
+                    placeholder="subject here..."
                     className="form-control"
                     value={formData.subject}
                     onChange={handleChange}
+                    required
                   />
-                  <label htmlFor="subject" className="">
-                    Subject
-                  </label>
                 </div>
               </div>
             </div>
             <div className="row">
               <div className="col-md-12">
                 <div className="md-form">
+                  <label htmlFor="message">Your message</label>
                   <textarea
                     type="text"
                     id="message"
                     name="message"
                     rows="2"
+                    placeholder="your message..."
                     className="form-control md-textarea"
                     value={formData.message}
                     onChange={handleChange}
+                    required
+                    minLength="10"
                   ></textarea>
-                  <label htmlFor="message">Your message</label>
                 </div>
               </div>
             </div>

diff --git a/OSW-frontend/src/components/Contact.js b/OSW-frontend/src/components/Contact.js
@@ -8,11 +8,13 @@ import sideImg from "../img/contact.svg";
 // import TwitterIcon from "@mui/icons-material/Twitter";
 // import InstagramIcon from "@mui/icons-material/Instagram";
 import SecFooter from "./SecFooter";
+import ContactForm from "./Contact Us Form/contactUsForm";
 
 function Contact() {
   return (
     <>
       <Navbar />
+      <ContactForm />
       <div className="contact-container">
         <div className="side1 side">
         <p style={{fontSize: "38px", fontWeight: "600", fontFamily: '"Open Sans", sans-serif;'}}>