dereklseitz
/
dlseitz.dev-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: fix regex phone pattern in contact-form.js

This commit is contained in:
Derek L. Seitz 2025-08-20 21:59:17 -05:00
parent f9ceb00a0b
commit 6fe184ffda
2 changed files with 7 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/about.njk
View File

@ -112,8 +112,6 @@ pageScripts:
<span class="error-message" id="message-error" aria-live="polite"></span> <span class="error-message" id="message-error" aria-live="polite"></span>
</fieldset> </fieldset>
<div class="h-captcha" data-sitekey="b63e5b64-c6f2-4154-b5a6-77169a924022"></div>
<div class="submit-reset"> <div class="submit-reset">
<button type="submit">Send Message</button> <button type="submit">Send Message</button>
<button type="reset">Reset Form</button> <button type="reset">Reset Form</button>

28
src/scripts/contact-form.js
View File

@ -29,22 +29,9 @@ form.addEventListener("submit", function(event) {
console.warn("Honeypot field was filled. Blocking submission."); console.warn("Honeypot field was filled. Blocking submission.");
// You might want to display a message to the user, // You might want to display a message to the user,
// but it's often better to fail silently to not alert the bot. // but it's often better to fail silently to not alert the bot.
// For debugging, you can add an alert:
// alert("Submission failed due to security check.");
return; // This is the most important part: stop the function here. return; // This is the most important part: stop the function here.
} }
// Get the hCaptcha response token
const hCaptchaResponse = document.querySelector('[name="h-captcha-response"]').value;
// Check if the hCaptcha token is missing
if (!hCaptchaResponse) {
// You might want to display a user-facing error here
console.warn("hCaptcha token is missing. Submission blocked.");
alert("Please complete the hCaptcha verification.");
hasErrors = true;
}
// Get values // Get values
const firstName = document.getElementById("first-name").value.trim(); const firstName = document.getElementById("first-name").value.trim();
const lastName = document.getElementById("last-name").value.trim(); const lastName = document.getElementById("last-name").value.trim();
@ -88,9 +75,9 @@ form.addEventListener("submit", function(event) {
} }
// Phone — match format: 123-456-7890 // Phone — match format: 123-456-7890
const phonePattern = /^(\(?\d{3}\)?[\s-.]?\d{3}[\-.\s]?\d{4})$/; const phonePattern = /^(\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4})$/;
if (!phonePattern.test(phone)) { if (!phonePattern.test(phone)) {
showError("phone", "Phone number format is invalid."); showError("phone", "Phone number must be in the format 123-456-7890.");
hasErrors = true; hasErrors = true;
} }
@ -111,7 +98,6 @@ form.addEventListener("submit", function(event) {
contactMethod: contactMethod, contactMethod: contactMethod,
message: message, message: message,
url: honeypotField, url: honeypotField,
hCaptchaResponse: hCaptchaResponse
}; };
// Send the data to the backend using fetch() // Send the data to the backend using fetch()
@ -143,10 +129,10 @@ form.addEventListener("submit", function(event) {
}); });
form.addEventListener("reset", function (event) { form.addEventListener("reset", function (event) {
const confirmed = confirm("Are you sure you want to clear the form?"); const confirmed = confirm("Are you sure you want to clear the form?");
if (!confirmed) { if (!confirmed) {
event.preventDefault(); event.preventDefault();
return; return;
} }
clearErrors(); clearErrors();
}); });