kntdgrtnnly/upiecep-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Further bug fixes in registration page

Browse Source
This commit is contained in:
Kent Joseph T. Palima
2026-04-30 15:36:18 +08:00
parent c5ac644dff
commit 3c55442eec
2 changed files with 62 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/apply.astro
+39 -15
View File
@@ -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
if(successMsg) successMsg.style.display = 'block'; // Show success message
mainForm.style.display = 'none';
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
+21 -3
View File
@@ -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;
@@ -29,10 +29,10 @@
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;
}
}
}
}