91 lines
3.1 KiB
JavaScript
91 lines
3.1 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// --- Client-side validation for the add contact form ---
|
|
const addContactForm = document.getElementById('addContactForm');
|
|
if (addContactForm) {
|
|
addContactForm.addEventListener('submit', function (event) {
|
|
if (!validateForm(this)) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
});
|
|
}
|
|
|
|
// --- Client-side validation for the edit contact form ---
|
|
const editContactForm = document.getElementById('editContactForm');
|
|
if (editContactForm) {
|
|
editContactForm.addEventListener('submit', function(event) {
|
|
if (!validateForm(this)) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
});
|
|
}
|
|
|
|
// --- Edit Modal Handler ---
|
|
const editContactModal = document.getElementById('editContactModal');
|
|
if (editContactModal) {
|
|
editContactModal.addEventListener('show.bs.modal', function (event) {
|
|
const button = event.relatedTarget;
|
|
// Extract info from data-bs-* attributes
|
|
const id = button.getAttribute('data-id');
|
|
const name = button.getAttribute('data-name');
|
|
const email = button.getAttribute('data-email');
|
|
const phone = button.getAttribute('data-phone');
|
|
|
|
// Update the modal's content.
|
|
const modalTitle = editContactModal.querySelector('.modal-title');
|
|
const contactIdInput = editContactModal.querySelector('#edit_contact_id');
|
|
const nameInput = editContactModal.querySelector('#edit_name');
|
|
const emailInput = editContactModal.querySelector('#edit_email');
|
|
const phoneInput = editContactModal.querySelector('#edit_phone');
|
|
|
|
modalTitle.textContent = 'Edit Contact: ' + name;
|
|
contactIdInput.value = id;
|
|
nameInput.value = name;
|
|
emailInput.value = email;
|
|
phoneInput.value = phone;
|
|
});
|
|
}
|
|
|
|
// --- Toast notification handling ---
|
|
const toastEl = document.getElementById('notificationToast');
|
|
if (toastEl) {
|
|
const toast = new bootstrap.Toast(toastEl, { delay: 5000 });
|
|
toast.show();
|
|
}
|
|
|
|
// --- Feather Icons ---
|
|
feather.replace();
|
|
});
|
|
|
|
/**
|
|
* Validates a contact form (add or edit).
|
|
* @param {HTMLFormElement} form The form element to validate.
|
|
* @returns {boolean} True if valid, false otherwise.
|
|
*/
|
|
function validateForm(form) {
|
|
const name = form.querySelector('input[name="name"]');
|
|
const email = form.querySelector('input[name="email"]');
|
|
let isValid = true;
|
|
|
|
// Reset invalid states
|
|
name.classList.remove('is-invalid');
|
|
email.classList.remove('is-invalid');
|
|
|
|
// Validate Name
|
|
if (name.value.trim() === '') {
|
|
name.classList.add('is-invalid');
|
|
isValid = false;
|
|
}
|
|
|
|
// Validate Email
|
|
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
if (email.value.trim() === '' || !emailPattern.test(email.value)) {
|
|
email.classList.add('is-invalid');
|
|
isValid = false;
|
|
}
|
|
|
|
return isValid;
|
|
}
|