135 lines
3.7 KiB
JavaScript
Executable File
135 lines
3.7 KiB
JavaScript
Executable File
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 message = form.querySelector('textarea[name="message"]');
|
|
var submit = form.querySelector('button[type="submit"]');
|
|
|
|
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,}/;
|
|
|
|
|
|
if (fullName) {
|
|
fullName.addEventListener('input', function (e) {
|
|
if (! fullName.value.toLowerCase().match(fullNameRegex)) {
|
|
fullName.classList.add('invalid');
|
|
} else {
|
|
fullName.classList.remove('invalid');
|
|
}
|
|
});
|
|
}
|
|
|
|
if (email) {
|
|
email.addEventListener('input', function (e) {
|
|
if (! email.value.toLowerCase().match(emailRegex)) {
|
|
email.classList.add('invalid');
|
|
} else {
|
|
email.classList.remove('invalid');
|
|
}
|
|
});
|
|
}
|
|
|
|
if (phone) {
|
|
phone.addEventListener('input', function (e) {
|
|
if (! phone.value.match(phoneRegex)) {
|
|
phone.classList.add('invalid');
|
|
} else {
|
|
phone.classList.remove('invalid');
|
|
}
|
|
});
|
|
}
|
|
|
|
if (message) {
|
|
message.addEventListener('input', function (e) {
|
|
if (!message.value) {
|
|
message.classList.add('invalid');
|
|
} else {
|
|
message.classList.remove('invalid');
|
|
}
|
|
});
|
|
}
|
|
|
|
if (submit) {
|
|
submit.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
|
|
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;
|
|
}
|
|
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);
|
|
fetch(form.action, {
|
|
method: 'POST',
|
|
body: fd
|
|
}).then(function (res) {
|
|
if (!res.ok) {
|
|
res.json().then(function (err) {
|
|
if ('field' in err) {
|
|
form.querySelector('input[name="'+ err.field + '"]').classList.add('invalid');
|
|
}
|
|
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 = "";
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
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');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
registerFormValidators('subscribeForm');
|
|
registerFormValidators('contactForm');
|
|
registerHamburgers();
|
|
});
|