feat(contact-form): enhance validation and accessibility

src/about.njk

@@ -54,31 +54,37 @@ pageScripts:
             <legend>Contact Info</legend>
             <div class="first-name">
               <label for="first-name">First Name:<span class="req-ask">*</span></label>
-              <input type="text" id="first-name" name="first-name" placeholder="Ex. Sally" required>
+              <input type="text" id="first-name" name="first-name" placeholder="Ex. Sally" required aria-describedby="first-name-error">
+              <span class="error-message" id="first-name-error" aria-live="polite"></span>
             </div>
         
             <div class="last-name">
               <label for="last-name">Last Name:<span class="req-ask">*</span></label>
-              <input type="text" id="last-name" name="last-name" placeholder="Ex. Westfield" required>
+              <input type="text" id="last-name" name="last-name" placeholder="Ex. Westfield" required aria-describedby="last-name-error">
+              <span class="error-message" id="last-name-error" aria-live="polite"></span>
+
             </div>
         
             <div class="organization">
               <label for="organization">Organization:</label>
-              <input type="text" id="organization" name="organization" placeholder="Optional">
+              <input type="text" id="organization" name="organization" placeholder="Optional" aria-describedby="organization-error">
+              <span class="error-message" id="organization-error" aria-live="polite"></span>
             </div>
           
             <div class="email">
               <label for="email">Email:<span class="req-ask">*</span></label>
-              <input type="email" id="email" name="email" placeholder="Ex. user@domain.com" required>
+              <input type="email" id="email" name="email" placeholder="Ex. user@domain.com" required aria-describedby="email-error">
+              <span class="error-message" id="email-error" aria-live="polite"></span>
             </div>
     
             <div class="phone">
               <label for="phone">Phone:<span class="req-ask">*</span></label>
-              <input type="tel" id="phone" name="phone" placeholder="Ex. 111-333-4444" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
+              <input type="tel" id="phone" name="phone" placeholder="Ex. 111-333-4444" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required aria-describedby="phone-error">
+              <span class="error-message" id="phone-error" aria-live="polite"></span>
             </div>
 
-            <div class="preferred-method">
+            <div class="preferred-method" role="radiogroup" aria-labelledby="contact-method-label">
-              <h3>Preferred Contact Method</h3>
+              <h3 id="contact-method-label">Preferred Contact Method</h3>
               <div class="radio-group">
                 <div class="email-radio">
                   <input type="radio" id="contact-email" name="contact-method" value="email" checked required>
@@ -97,9 +103,13 @@ pageScripts:
           <fieldset class="message-field">
             <legend>Message</legend>
             <label for="message">Questions or Feedback</label>
-            <textarea id="message" name="message" rows="15" placeholder="What questions or feedback do you have for me?" required></textarea>
+            <textarea id="message" name="message" rows="15" placeholder="What questions or feedback do you have for me?" required aria-describedby="message-error"></textarea>
+            <span class="error-message" id="message-error" aria-live="polite"></span>
           </fieldset>
+          <div class="submit-reset">
             <button type="submit">Send Message</button>
+            <button type="reset">Reset Form</button>
+          </div>
         </div>
       </div>
       <p class="form-note">* Required fields</p>

src/scripts/accordion.js

@@ -2,6 +2,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
   const accordionHeaders = document.querySelectorAll('.accordion-header');
 
   accordionHeaders.forEach(header => {
+    // Toggle content on click
     header.addEventListener('click', () => {
       const content = header.nextElementSibling;
       if (content.style.display === 'block') {
@@ -10,5 +11,13 @@ document.addEventListener('DOMContentLoaded', (event) => {
         content.style.display = 'block';
       }
     });
+
+    // Toggle content on Enter or Space key press
+    header.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        header.click();
+      }
+    });
   });
 });

src/scripts/contact-form.js

@@ -1,68 +1,94 @@
 // Contact Form Submission Script
 
-// Select Form Element
 const form = document.getElementById("contact-form");
+const resetButton = form.querySelector('button[type="reset"]');
 
-// Event Listener for Submit Event
-form.addEventListener('submit', function(event) {
-    event.preventDefault(); // Prevent default form submission
 
-    // Variable Assignments
+// Utility: Show error for specific input
-    const firstName = document.getElementById('first-name').value.trim();
+function showError(inputId, message) {
-    const lastName = document.getElementById('last-name').value.trim();
+    const input = document.getElementById(inputId);
-    const organization = document.getElementById('organization').value.trim(); // Fixed typo
+    const errorSpan = document.getElementById(`${inputId}-error`);
-    const email = document.getElementById('email').value.trim();
+    if (input) input.classList.add("error");
-    const phone = document.getElementById('phone').value.trim();
+    if (errorSpan) errorSpan.textContent = message;
+}
+
+// Utility: Clear all errors
+function clearErrors() {
+    document.querySelectorAll(".error-message").forEach(span => span.textContent = "");
+    document.querySelectorAll("input, textarea").forEach(input => input.classList.remove("error"));
+}
+
+form.addEventListener("submit", function(event) {
+    event.preventDefault(); // Prevent actual form submission
+
+    clearErrors(); // Clear previous errors
+
+    // Get values
+    const firstName = document.getElementById("first-name").value.trim();
+    const lastName = document.getElementById("last-name").value.trim();
+    const organization = document.getElementById("organization").value.trim();
+    const email = document.getElementById("email").value.trim();
+    const phone = document.getElementById("phone").value.trim();
     const contactMethod = document.querySelector('input[name="contact-method"]:checked')?.value;
-    const message = document.getElementById('message').value.trim();
+    const message = document.getElementById("message").value.trim();
 
-    const errorMessages = [];
+    let hasErrors = false;
 
-    // First name validation
+    // First Name
     if (!firstName) {
-        errorMessages.push("Please enter your first name.");
+        showError("first-name", "Please enter your first name.");
+        hasErrors = true;
     } else if (firstName.length < 2) {
-        errorMessages.push("First name must be at least 2 characters.");
+        showError("first-name", "First name must be at least 2 characters.");
+        hasErrors = true;
     }
 
-    // Last name validation
+    // Last Name
     if (!lastName) {
-        errorMessages.push("Please enter your last name.");
+        showError("last-name", "Please enter your last name.");
+        hasErrors = true;
     } else if (lastName.length < 2) {
-        errorMessages.push("Last name must be at least 2 characters.");
+        showError("last-name", "Last name must be at least 2 characters.");
+        hasErrors = true;
     }
 
-    // Email validation
+    // Organization (optional)
+    if (organization.length > 0 && organization.length < 2) {
+        showError("organization", "Organization name must be at least 2 characters.");
+        hasErrors = true;
+    }
+
+    // Email
     const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     if (!emailPattern.test(email)) {
-        errorMessages.push("Please enter a valid email address.");
+        showError("email", "Please enter a valid email address.");
+        hasErrors = true;
     }
 
-    // Phone number validation (exactly 10 digits)
+    // Phone — match format: 123-456-7890
-    const phonePattern = /^\d{10}$/;
+    const phonePattern = /^\d{3}-\d{3}-\d{4}$/;
     if (!phonePattern.test(phone)) {
-        errorMessages.push("Phone number must be exactly 10 digits (numbers only).");
+        showError("phone", "Phone number must be in the format 123-456-7890.");
+        hasErrors = true;
     }
 
-    // Message validation
+    // Message
     if (message.length < 10) {
-        errorMessages.push("Message must be at least 10 characters long.");
+        showError("message", "Message must be at least 10 characters long.");
+        hasErrors = true;
     }
 
-    // Optional: Organization validation (only if provided)
+    if (!hasErrors) {
-    if (organization.length > 0 && organization.length < 2) {
-        errorMessages.push("Organization name must be at least 2 characters if provided.");
-    }
-
-    // Display errors or submit
-    const errorDiv = document.getElementById('errorMessages');
-    if (errorMessages.length > 0) {
-        errorDiv.innerHTML = errorMessages.join("<br>");
-    } else {
-        errorDiv.innerHTML = "";
         alert("Form submitted successfully!");
-        // this.submit(); // Uncomment if actually submitting to a server
+        // form.submit(); // Uncomment when ready to send to server
     }
 });
 
-// This script isn't finished.
+form.addEventListener("reset", function (event) {
+  const confirmed = confirm("Are you sure you want to clear the form?");
+  if (!confirmed) {
+    event.preventDefault();
+    return;
+  }
+  clearErrors();
+});

src/styles/about.css

@@ -137,11 +137,26 @@ legend {
 }
 
 label {
-  display: block;
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: #333;
   margin-bottom: 0.4rem;
+  display: block;
   font-weight: 500;
 }
 
+.error-message {
+  color: red;
+  font-size: 0.9em;
+  margin-top: 4px;
+  display: block;
+}
+
+input.error, textarea.error {
+  border-color: red;
+}
+
+
 input[type="text"],
 input[type="email"],
 input[type="tel"],
@@ -184,7 +199,13 @@ textarea:focus {
 }
 
 /* Button */
-button[type="submit"] {
+.submit-reset {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+}
+
+button[type="submit"], button[type="reset"] {
   margin:20px 0px 20px 0px;
   padding: 8px 25px;
   background-color: #ea7e0b;
@@ -196,7 +217,7 @@ button[type="submit"] {
   transition: background-color 0.3s ease;
 }
 
-button[type="submit"]:hover {
+button[type="submit"]:hover, button[type="reset"]:hover {
   background-color: #2e97be;
 }