function getErrorWrapper(inputField) { let errorWrapper = inputField.parentNode.querySelector(".error-message"); if (!errorWrapper) { errorWrapper = document.createElement("div"); errorWrapper.classList.add("error-message"); errorWrapper.style.color = "red"; errorWrapper.style.fontSize = "12px"; errorWrapper.style.position = "absolute"; errorWrapper.style.left = "0"; inputField.parentNode.appendChild(errorWrapper); } return errorWrapper; } function validateField(inputField, errorMessage, customValidation) { const errorWrapper = getErrorWrapper(inputField); function validate() { const value = inputField.value.trim(); if (!value || (customValidation && !customValidation(value))) { errorWrapper.textContent = errorMessage; errorWrapper.style.display = "block"; inputField.style.borderColor = "red"; } else { errorWrapper.style.display = "none"; inputField.style.borderColor = ""; } } inputField.addEventListener("input", validate); inputField.addEventListener("blur", validate); } function validateCountryCode(selectField, errorMessage) { const errorWrapper = getErrorWrapper(selectField); selectField.addEventListener("blur", function () { if (!selectField.value || selectField.selectedIndex === 0) { errorWrapper.textContent = errorMessage; errorWrapper.style.display = "block"; selectField.style.borderColor = "red"; } else { errorWrapper.style.display = "none"; selectField.style.borderColor = ""; } }); } function validateContactNumber(inputField, errorMessage, maxLength = 10) { const errorWrapper = getErrorWrapper(inputField); function validate() { const value = inputField.value.trim(); if (!value) { errorWrapper.textContent = "Enter at least 1 digit"; errorWrapper.style.display = "block"; inputField.style.borderColor = "red"; } else { errorWrapper.style.display = "none"; inputField.style.borderColor = ""; } } inputField.addEventListener("input", function () { if (inputField.value.length > maxLength) { inputField.value = inputField.value.slice(0, maxLength); } }); inputField.addEventListener("blur", validate); } function initializeFormValidation() { const fieldsToValidate = [ { id: "first_name", message: "This field is required." }, { id: "last_name", message: "This field is required." }, { id: "dt_of_birth", message: "This field is required." }, { id: "address", message: "This field is required." } ]; fieldsToValidate.forEach(field => { const input = document.getElementById(field.id); if (input) validateField(input, field.message); }); validateCountryCode(document.getElementById("country_code"), "Choose Country Code"); validateContactNumber(document.getElementById("contact_no"), "Enter a valid phone number"); } document.addEventListener("DOMContentLoaded", initializeFormValidation);

Validation