Further bug fixes in registration page

src/pages/apply.astro

@@ -40,7 +40,7 @@ import '../styles/apply.scss';
       </div>
 
       <!-- THE ACTUAL FORM (Hidden by default) -->
-      <!-- PASTE YOUR GOOGLE SCRIPT URL IN THE ACTION ATTRIBUTE BELOW -->
+      <!-- REMEMBER TO PASTE YOUR GOOGLE SCRIPT URL IN THE ACTION ATTRIBUTE BELOW -->
       <form id="apply-form" class="hidden-form" action="https://script.google.com/macros/s/AKfycby_xG6EGVuLXvgs9ro20rMkK2zSyElPCHeMU_2F2Q_0WE08gtCNzrO-SEyjDAqS46Hr/exec">
         <h3>Applicant Details</h3>
         
@@ -74,11 +74,12 @@ import '../styles/apply.scss';
             type="text" 
             id="studentNumber" 
             name="studentNumber" 
-            pattern="20\d{2}-\d{5}" 
+            pattern="20[0-9]{2}-[0-9]{5}" 
             title="Please include the dash (e.g., 2022-12345)"
             required 
             placeholder="202X-XXXXX" 
           />
+          <span class="realtime-error" id="sn-error">Format must be exactly 20XX-XXXXX (Don't forget the dash!)</span>
         </div>
 
         <div class="input-group">
@@ -104,11 +105,12 @@ import '../styles/apply.scss';
             type="tel" 
             id="mobileNumber" 
             name="mobileNumber" 
-            pattern="09\d{9}" 
+            pattern="09[0-9]{9}" 
             title="Please enter an 11-digit mobile number starting with 09 (e.g., 09123456789)"
             required 
             placeholder="09XXXXXXXXX" 
           />
+          <span class="realtime-error" id="mn-error">Must be an 11-digit number starting with 09</span>
         </div>
 
         <div class="input-group">
@@ -177,7 +179,7 @@ import '../styles/apply.scss';
 </Layout>
 
 <script>
-  // Elements
+  // --- ELEMENTS ---
   const eligibilitySection = document.getElementById('eligibility-section');
   const checkBtn = document.getElementById('check-eligibility-btn');
   const ineligibleMsg = document.getElementById('ineligible-message');
@@ -186,10 +188,9 @@ import '../styles/apply.scss';
   const loadingMsg = document.getElementById('loading-msg');
   const successMsg = document.getElementById('success-message');
 
-  // Eligibility Logic
+  // --- ELIGIBILITY LOGIC ---
   if (checkBtn && eligibilitySection && ineligibleMsg && mainForm) {
     checkBtn.addEventListener('click', () => {
-      // Get the selected values safely
       const isBSECENode = document.querySelector('input[name="isBSECE"]:checked') as HTMLInputElement;
       const isGraduatingNode = document.querySelector('input[name="isGraduating"]:checked') as HTMLInputElement;
 
@@ -201,28 +202,51 @@ import '../styles/apply.scss';
       const isBSECE = isBSECENode.value;
       const isGraduating = isGraduatingNode.value;
 
-      // Hide the eligibility card
       eligibilitySection.style.display = 'none';
 
-      // Check criteria: Must be ECE (yes) and NOT graduating (no)
       if (isBSECE === 'yes' && isGraduating === 'no') {
-        mainForm.style.display = 'block'; // Show the form!
+        mainForm.style.display = 'block'; 
       } else {
-        ineligibleMsg.style.display = 'block'; // Show rejection message
+        ineligibleMsg.style.display = 'block'; 
       }
     });
   }
 
-  // Form Submission Logic
+  // --- REAL-TIME VALIDATION LOGIC ---
+  const setupLiveValidation = (inputId: string, errorId: string) => {
+    const input = document.getElementById(inputId) as HTMLInputElement;
+    const errorSpan = document.getElementById(errorId);
+
+    if (input && errorSpan) {
+      input.addEventListener('input', () => {
+        if (input.value.length > 0) {
+          if (input.checkValidity()) {
+            errorSpan.style.display = 'none';
+            input.classList.remove('invalid-live');
+          } else {
+            errorSpan.style.display = 'block';
+            input.classList.add('invalid-live');
+          }
+        } else {
+          errorSpan.style.display = 'none';
+          input.classList.remove('invalid-live');
+        }
+      });
+    }
+  };
+
+  setupLiveValidation('studentNumber', 'sn-error');
+  setupLiveValidation('mobileNumber', 'mn-error');
+
+  // --- FORM SUBMISSION LOGIC ---
   if (mainForm) {
     mainForm.addEventListener('submit', (e) => {
-      e.preventDefault(); // Stop normal page reload
+      e.preventDefault(); 
       
       submitBtn.disabled = true;
       submitBtn.style.display = 'none';
       if(loadingMsg) loadingMsg.style.display = 'block';
 
-      // Send the data to the Google Script silently
       fetch(mainForm.action, {
         method: 'POST',
         body: new FormData(mainForm)
@@ -230,8 +254,8 @@ import '../styles/apply.scss';
       .then(response => response.json())
       .then(data => {
         if(data.result === 'success') {
-          mainForm.style.display = 'none'; // Hide form
+          mainForm.style.display = 'none'; 
-          if(successMsg) successMsg.style.display = 'block'; // Show success message
+          if(successMsg) successMsg.style.display = 'block'; 
         } else {
           alert('There was an error submitting your form. Please try again.');
           submitBtn.disabled = false;

src/styles/apply.scss

@@ -4,7 +4,7 @@
   padding-block: 8rem;
   padding-inline: 1rem;
   min-height: 100vh;
-  background-color: #f9fafb; /* Light background to make the white form pop */
+  background-color: #f9fafb;
 
   .form-container {
     max-width: 700px;
@@ -28,11 +28,11 @@
         line-height: 1.6;
         color: #4a4a4a;
         margin-bottom: 1rem;
-
+        
-        /* ADD THIS BLOCK: Resets the bold text back to normal paragraph size */
+        /* Forces the bold text to stay the same size as the paragraph */
         strong {
           font-size: 1rem;
-          font-weight: 700; /* Keeps it bold */
+          font-weight: 700;
           line-height: inherit;
         }
       }
@@ -131,6 +131,24 @@
         }
 
         textarea { resize: vertical; }
+
+        /* Real-time Validation Styles */
+        .realtime-error {
+          display: none; 
+          color: #dc2626; 
+          font-size: 0.8rem;
+          font-weight: 600;
+          margin-top: 0.4rem;
+        }
+
+        input.invalid-live {
+          border-color: #dc2626 !important;
+          background-color: #fef2f2; 
+          
+          &:focus {
+            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
+          }
+        }
       }
     }
 
@@ -164,4 +182,4 @@
       h1 { font-size: 2rem; }
     }
   }
-}
+}