91 lines
3.3 KiB
JavaScript
91 lines
3.3 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const preloader = document.querySelector('.preloader');
|
|
const submitButton = document.getElementById('submitButton');
|
|
const forgotForm = document.getElementById('forgotForm');
|
|
const emailField = document.getElementById('email');
|
|
const emailErrorRequired = document.getElementById('emailErrorRequired');
|
|
const emailErrorInvalid = document.getElementById('emailErrorInvalid');
|
|
const emailPattern = /(?=.*[\W_0-9])/;
|
|
|
|
if (submitButton) {
|
|
// Event listener untuk tombol SEND
|
|
submitButton.addEventListener('click', (event) => {
|
|
const emailValue = emailField.value.trim();
|
|
let isValid = true;
|
|
|
|
// Reset error states
|
|
emailErrorRequired.style.display = 'none';
|
|
emailErrorInvalid.style.display = 'none';
|
|
emailField.style.border = '1px solid red';
|
|
|
|
// Validasi email
|
|
if (!emailValue) {
|
|
emailErrorRequired.style.display = 'block';
|
|
isValid = false;
|
|
} else if (!emailPattern.test(emailValue)) {
|
|
emailErrorInvalid.style.display = 'block';
|
|
isValid = false;
|
|
} else {
|
|
emailField.style.border = '1px solid blue';
|
|
}
|
|
|
|
if (!isValid) {
|
|
// Jika validasi gagal, cegah pengiriman form dan tampilkan error
|
|
event.preventDefault();
|
|
} else {
|
|
// Jika validasi berhasil, tampilkan preloader
|
|
if (preloader) preloader.style.display = 'flex';
|
|
}
|
|
});
|
|
}
|
|
|
|
if (forgotForm) {
|
|
forgotForm.addEventListener('submit', (event) => {
|
|
const emailValue = emailField.value.trim();
|
|
let isValid = true;
|
|
|
|
// Reset error states
|
|
emailErrorRequired.style.display = 'none';
|
|
emailErrorInvalid.style.display = 'none';
|
|
emailField.style.border = '1px solid red';
|
|
|
|
if (!emailValue) {
|
|
emailErrorRequired.style.display = 'block';
|
|
isValid = false;
|
|
} else if (!emailPattern.test(emailValue)) {
|
|
emailErrorInvalid.style.display = 'block';
|
|
isValid = false;
|
|
} else {
|
|
emailField.style.border = '1px solid blue';
|
|
}
|
|
|
|
if (!isValid) {
|
|
// Jika validasi gagal, cegah pengiriman form
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
}
|
|
|
|
if (emailField) {
|
|
emailField.addEventListener('input', () => {
|
|
const emailValue = emailField.value.trim();
|
|
|
|
emailErrorRequired.style.display = 'none';
|
|
emailErrorInvalid.style.display = 'none';
|
|
emailField.style.border = '1px solid red';
|
|
|
|
if (!emailValue) {
|
|
emailErrorRequired.style.display = 'block';
|
|
} else if (!emailPattern.test(emailValue)) {
|
|
emailErrorInvalid.style.display = 'block';
|
|
} else {
|
|
emailField.style.border = '1px solid blue';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Pastikan preloader menghilang jika halaman selesai dimuat
|
|
window.addEventListener('load', () => {
|
|
if (preloader) preloader.style.display = 'none';
|
|
});
|
|
}); |