Untitled
unknown
plain_text
6 months ago
2.1 kB
2
Indexable
const form = document.querySelector("form"); form.addEventListener("submit", (e) => { e.preventDefault(); // Tambahkan tanda kurung di sini // Lakukan validasi, jika tidak valid, hentikan pengiriman if (!validateForm(form)) return; // Jika valid, form bisa dikirim (misalnya melalui AJAX atau form.submit()) console.log('Form is valid and ready to submit!'); }); const validateForm = (form) => { let valid = true; // Ambil elemen input let name = form.querySelector(".name"); let email = form.querySelector(".email"); let message = form.querySelector(".message"); // Validasi Nama if (name.value.trim() === "") { giveError(name, "Please enter your name"); valid = false; } else { clearError(name); } // Validasi Pesan if (message.value.trim() === "") { giveError(message, "Please enter your message"); valid = false; } else { clearError(message); } // Validasi Email if (!validateEmail(email.value.trim())) { giveError(email, "Please enter a valid email address"); valid = false; } else { clearError(email); } return valid; // Kembalikan status validasi }; // Fungsi untuk validasi email dengan regex const validateEmail = (email) => { const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailPattern.test(email); }; // Fungsi untuk menampilkan pesan error const giveError = (field, message) => { let parentElement = field.parentElement; parentElement.classList.add("error"); // Hapus pesan error sebelumnya jika ada let existingError = parentElement.querySelector(".err-msg"); if (existingError) { existingError.remove(); } // Tambahkan pesan error baru let error = document.createElement("span"); error.textContent = message; error.classList.add("err-msg"); parentElement.appendChild(error); }; // Fungsi untuk menghapus error jika sudah valid const clearError = (field) => { let parentElement = field.parentElement; parentElement.classList.remove("error"); let existingError = parentElement.querySelector(".err-msg"); if (existingError) { existingError.remove(); } };
Editor is loading...
Leave a Comment