## Pull Request: Advanced, User-Friendly Project Submission Form Validation

index.html

@@ -151,53 +151,155 @@ <h2>Want to add your project?</h2>
             If you have an amazing project that you would like to showcase,
             please reach out to us!
           </p>
+
           <form
-            action="https://formsubmit.co/[email protected]"
-            method="POST"
-            class="add-project-form"
-          >
-            <div class="form-group">
-              <input
-                type="text"
-                name="projectName"
-                placeholder="Project Name"
-                required
-              />
-            </div>
-            <div class="form-group">
-              <input
-                type="url"
-                name="githubLink"
-                placeholder="GitHub Link"
-                required
-              />
-            </div>
-            <div class="form-group">
-              <input
-                type="url"
-                name="liveLink"
-                placeholder="Live Project Link"
-              />
-            </div>
-            <div class="form-group">
-              <input
-                type="text"
-                name="techStack"
-                placeholder="Tech Stack (e.g. React, Python)"
-                required
-              />
-            </div>
-            <div class="form-group">
-              <textarea
-                name="description"
-                placeholder="Project Description"
-                rows="3"
-                required
-              ></textarea>
-            </div>
-            <button type="submit" class="add-project-btn">Submit</button>
-          </form>
+  id="addProjectForm"
+  action="https://formsubmit.co/[email protected]"
+  method="POST"
+  class="add-project-form"
+  novalidate
+>
+  <div class="form-group">
+    <input
+      type="text"
+      id="projectName"
+      name="projectName"
+      placeholder="Project Name"
+      required
+    />
+    <div class="error-message" id="projectNameError"></div>
+  </div>
+  <div class="form-group">
+    <input
+      type="url"
+      id="githubLink"
+      name="githubLink"
+      placeholder="GitHub Link"
+      required
+    />
+    <div class="error-message" id="githubLinkError"></div>
+  </div>
+  <div class="form-group">
+    <input
+      type="url"
+      id="liveLink"
+      name="liveLink"
+      placeholder="Live Project Link"
+    />
+    <div class="error-message" id="liveLinkError"></div>
+  </div>
+  <div class="form-group">
+    <input
+      type="text"
+      id="techStack"
+      name="techStack"
+      placeholder="Tech Stack (e.g. React, Python)"
+      required
+    />
+    <div class="error-message" id="techStackError"></div>
+  </div>
+  <div class="form-group">
+    <textarea
+      id="description"
+      name="description"
+      placeholder="Project Description"
+      rows="3"
+      required
+    ></textarea>
+    <div class="error-message" id="descriptionError"></div>
+  </div>
+  <button type="submit" class="add-project-btn">Submit</button>
+</form>
+
+<script>
+  const form = document.getElementById('addProjectForm');
+
+  function isValidURL(string) {
+    try {
+      new URL(string);
+      return true;
+    } catch (_) {
+      return false;
+    }
+  }
+
+  function validateTechStack(input) {
+    // Allow letters, numbers, commas, spaces, plus, and dash
+    const regex = /^[a-zA-Z0-9, +\-]+$/;
+    return regex.test(input.trim());
+  }
+
+  form.addEventListener('submit', function (event) {
+    event.preventDefault();
+
+    // Clear all previous errors
+    ['projectName', 'githubLink', 'liveLink', 'techStack', 'description'].forEach(
+      id => {
+        document.getElementById(id + 'Error').textContent = '';
+      }
+    );
+
+    // Validate Project Name
+    const projectName = form.projectName.value.trim();
+    if (projectName.length < 3) {
+      document.getElementById('projectNameError').textContent =
+        'Project Name must be at least 3 characters long.';
+      form.projectName.focus();
+      return;
+    }
+
+    // Validate GitHub Link
+    const githubLink = form.githubLink.value.trim();
+    if (!isValidURL(githubLink) || !githubLink.includes('github.com')) {
+      document.getElementById('githubLinkError').textContent =
+        'Please enter a valid GitHub URL.';
+      form.githubLink.focus();
+      return;
+    }
+
+    // Validate Live Project Link (optional)
+    const liveLink = form.liveLink.value.trim();
+    if (liveLink && !isValidURL(liveLink)) {
+      document.getElementById('liveLinkError').textContent =
+        'Please enter a valid URL for the Live Project.';
+      form.liveLink.focus();
+      return;
+    }
+
+    // Validate Tech Stack
+    const techStack = form.techStack.value.trim();
+    if (!validateTechStack(techStack)) {
+      document.getElementById('techStackError').textContent =
+        'Tech Stack can only contain letters, numbers, commas, spaces, plus (+), or dash (-).';
+      form.techStack.focus();
+      return;
+    }
+
+    // Validate Description
+    const description = form.description.value.trim();
+    if (description.length < 10) {
+      document.getElementById('descriptionError').textContent =
+        'Description must be at least 10 characters long.';
+      form.description.focus();
+      return;
+    }
+
+    // All validations passed, submit the form
+    form.submit();
+  });
+</script>
+
+<style>
+.error-message {
+  color: #ff8800;  /* Bootstrap's accessible, professional red */
+  font-size: 0.95em;
+  margin-top: 8px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+</style>
 
+
           <!-- Action Buttons for Toasts -->
           <div class="action-buttons">
             <button class="action-btn" onclick="showToast('project')">New Project</button>