189 lines
5.2 KiB
JavaScript
Raw Normal View History

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"]');
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) {
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');
registerFormValidators('signForm');
registerFormValidators('volunteerForm');
2022-02-23 17:58:47 -08:00
registerHamburgers();
2021-12-27 07:01:20 +00:00
});