2022-01-09 09:30:44 +00:00
|
|
|
function registerFormValidators(formId) {
|
|
|
|
var form = document.getElementById(formId);
|
|
|
|
var fullName = form.querySelector('input[name="full_name"]');
|
|
|
|
var email = form.querySelector('input[name="email"]');
|
|
|
|
var phone = form.querySelector('input[name="phone"]');
|
|
|
|
var subject = form.querySelector('input[name="subject"]');
|
2022-02-25 22:19:05 -08:00
|
|
|
var position = form.querySelector('select[name="position"]');
|
2022-02-25 22:01:14 -08:00
|
|
|
var address = form.querySelector('input[name="address"]');
|
|
|
|
var quantity = form.querySelector('input[name="quantity"]');
|
|
|
|
var wireStake = form.querySelector('input[name="wire_stake"]');
|
2022-01-09 09:30:44 +00:00
|
|
|
var message = form.querySelector('textarea[name="message"]');
|
|
|
|
var submit = form.querySelector('button[type="submit"]');
|
2021-12-27 07:01:20 +00:00
|
|
|
|
|
|
|
const emailRegex = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
|
|
|
|
const phoneRegex = /^(\+?0?1\s?)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;
|
|
|
|
const fullNameRegex = /[^\s.]{2,} [^\s.]{2,}/;
|
|
|
|
|
|
|
|
|
2022-01-09 09:30:44 +00:00
|
|
|
if (fullName) {
|
|
|
|
fullName.addEventListener('input', function (e) {
|
|
|
|
if (! fullName.value.toLowerCase().match(fullNameRegex)) {
|
|
|
|
fullName.classList.add('invalid');
|
|
|
|
} else {
|
|
|
|
fullName.classList.remove('invalid');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2021-12-27 07:01:20 +00:00
|
|
|
|
2022-01-09 09:30:44 +00:00
|
|
|
if (email) {
|
|
|
|
email.addEventListener('input', function (e) {
|
|
|
|
if (! email.value.toLowerCase().match(emailRegex)) {
|
|
|
|
email.classList.add('invalid');
|
|
|
|
} else {
|
|
|
|
email.classList.remove('invalid');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2021-12-27 07:01:20 +00:00
|
|
|
|
2022-01-09 09:30:44 +00:00
|
|
|
if (phone) {
|
|
|
|
phone.addEventListener('input', function (e) {
|
|
|
|
if (! phone.value.match(phoneRegex)) {
|
|
|
|
phone.classList.add('invalid');
|
|
|
|
} else {
|
|
|
|
phone.classList.remove('invalid');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2021-12-27 07:01:20 +00:00
|
|
|
|
2022-01-09 09:30:44 +00:00
|
|
|
if (message) {
|
|
|
|
message.addEventListener('input', function (e) {
|
|
|
|
if (!message.value) {
|
|
|
|
message.classList.add('invalid');
|
2021-12-27 07:01:20 +00:00
|
|
|
} else {
|
2022-01-09 09:30:44 +00:00
|
|
|
message.classList.remove('invalid');
|
2021-12-27 07:01:20 +00:00
|
|
|
}
|
|
|
|
});
|
2022-01-09 09:30:44 +00:00
|
|
|
}
|
|
|
|
|
2022-02-25 22:01:14 -08:00
|
|
|
if (address) {
|
|
|
|
address.addEventListener('input', function (e) {
|
|
|
|
if (!address.value) {
|
|
|
|
address.classList.add('invalid');
|
|
|
|
} else {
|
|
|
|
address.classList.remove('invalid');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
if (position) {
|
|
|
|
position.addEventListener('input', function (e) {
|
|
|
|
if (!position.value) {
|
|
|
|
position.classList.add('invalid');
|
|
|
|
} else {
|
|
|
|
position.classList.remove('invalid');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
if (quantity) {
|
|
|
|
quantity.addEventListener('input', function (e) {
|
|
|
|
if (!quantity.value) {
|
|
|
|
quantity.classList.add('invalid');
|
|
|
|
} else {
|
|
|
|
quantity.classList.remove('invalid');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-01-09 09:30:44 +00:00
|
|
|
if (submit) {
|
|
|
|
submit.addEventListener('click', function (e) {
|
|
|
|
e.preventDefault();
|
2021-12-27 07:01:20 +00:00
|
|
|
|
2022-01-09 09:30:44 +00:00
|
|
|
if (fullName && !fullName.value.toLowerCase().match(fullNameRegex)) {
|
|
|
|
alert("Your full name appears invalid.");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (email && !email.value.toLowerCase().match(emailRegex)) {
|
|
|
|
alert("Your email address is invalid.");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (phone && !phone.value.match(phoneRegex)) {
|
|
|
|
alert("Your phone number is invalid.");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (message && !message.value) {
|
|
|
|
alert("Your message is invalid.");
|
|
|
|
return;
|
|
|
|
}
|
2022-02-25 22:01:14 -08:00
|
|
|
if (address && !address.value) {
|
|
|
|
alert("Your address is invalid.");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (position && !position.value) {
|
|
|
|
alert("Your volunteer position is invalid.");
|
|
|
|
return;
|
|
|
|
}
|
2022-01-09 09:30:44 +00:00
|
|
|
var fd = new FormData();
|
|
|
|
if (fullName)
|
|
|
|
fd.append('full_name', fullName.value);
|
|
|
|
if (email)
|
|
|
|
fd.append('email', email.value);
|
|
|
|
if (phone)
|
|
|
|
fd.append('phone', phone.value);
|
|
|
|
if (message)
|
|
|
|
fd.append('message', message.value);
|
|
|
|
if (subject)
|
|
|
|
fd.append('subject', subject.value);
|
2022-02-25 22:01:14 -08:00
|
|
|
if (address)
|
|
|
|
fd.append('address', address.value);
|
|
|
|
if (position)
|
|
|
|
fd.append('position', position.value);
|
|
|
|
if (quantity)
|
|
|
|
fd.append('quantity', quantity.value);
|
|
|
|
if (wireStake)
|
|
|
|
fd.append('wire_stake', wireStake.value);
|
2022-02-23 17:58:47 -08:00
|
|
|
fetch(form.action, {
|
2022-01-09 09:30:44 +00:00
|
|
|
method: 'POST',
|
|
|
|
body: fd
|
|
|
|
}).then(function (res) {
|
|
|
|
if (!res.ok) {
|
|
|
|
res.json().then(function (err) {
|
|
|
|
if ('field' in err) {
|
2022-02-25 22:19:05 -08:00
|
|
|
form.querySelector('[name="'+ err.field + '"]').classList.add('invalid');
|
2022-01-09 09:30:44 +00:00
|
|
|
}
|
|
|
|
alert(err.message);
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
alert("Submitted successfully.");
|
|
|
|
if (fullName)
|
|
|
|
fullName.value = "";
|
|
|
|
if (email)
|
|
|
|
email.value = "";
|
|
|
|
if (phone)
|
|
|
|
phone.value = "";
|
|
|
|
if (message)
|
|
|
|
message.value = "";
|
|
|
|
if (subject)
|
|
|
|
subject.value = "";
|
2022-02-25 22:01:14 -08:00
|
|
|
if (address)
|
|
|
|
address.value = "";
|
2022-01-09 09:30:44 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-02-23 17:58:47 -08:00
|
|
|
function registerHamburgers() {
|
|
|
|
for (const hamburger of document.querySelectorAll('.hamburger')) {
|
|
|
|
hamburger.addEventListener('click', function (e) {
|
|
|
|
var target = document.getElementById(e.currentTarget.dataset.targetId);
|
|
|
|
if (e.currentTarget.classList.contains('is-open')) {
|
|
|
|
e.currentTarget.classList.remove('is-open');
|
|
|
|
target.classList.remove('is-open');
|
|
|
|
} else {
|
|
|
|
e.currentTarget.classList.add('is-open');
|
|
|
|
target.classList.add('is-open');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-01-09 09:30:44 +00:00
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
registerFormValidators('subscribeForm');
|
|
|
|
registerFormValidators('contactForm');
|
2022-02-25 21:49:32 -08:00
|
|
|
registerFormValidators('signForm');
|
|
|
|
registerFormValidators('volunteerForm');
|
2022-02-23 17:58:47 -08:00
|
|
|
registerHamburgers();
|
2021-12-27 07:01:20 +00:00
|
|
|
});
|