I am developing an html form for sports event where the required attributes for name, guardian, dob, school and class classes are added or removed dynamically when one field is non empty or every field is empty. After using pikaday datepicker for dob field when i clear the dob field other field’s required attribes are not removed dynamically. Please fix this if you can.Here is my javascript code-
document.addEventListener("DOMContentLoaded", function () {
// Initialize Pikaday datepicker for each form
const formConfigs = {
form1: {
minDate: new Date(2018, 0, 1),
apiUrl:
"https://script.google.com/macros/s/AKfycbymk9DbjsFZbWz_uuDACLcnkHA7eji1U3Q8K4cLscqvTZ2Wb9EPBvAN30Hmcq92XYAH/exec",
redirectUrl: "./group2.html",
},
form2: {
minDate: new Date(2016, 0, 1),
apiUrl:
"https://script.google.com/macros/s/AKfycbxJZbH7G9iSPj3Pq-lGMTZoywoTIH5CN7dsRECmb2VvYsxNsb5oIQ2lM7qKnpKYbd5Q/exec",
redirectUrl: "./group3.html",
},
form3: { minDate: new Date(2014, 0, 1), apiUrl: "", redirectUrl: "" },
};
Object.keys(formConfigs).forEach((formId) => {
const form = document.getElementById(formId);
if (form) {
const minDate = formConfigs[formId].minDate;
const dobFields = form.querySelectorAll(".dob");
dobFields.forEach((field) => {
const picker = new Pikaday({
field: field,
format: "DD/MM/YYYY",
toString: (date, format) => {
const day = date.getDate().toString().padStart(2, "0");
const month = (date.getMonth() + 1).toString().padStart(2, "0");
const year = date.getFullYear();
return `${day}/${month}/${year}`;
},
parse: (dateString, format) => {
const parts = dateString.split("/");
const day = parseInt(parts[0], 10);
const month = parseInt(parts[1], 10) - 1;
const year = parseInt(parts[2], 10);
return new Date(year, month, day);
},
yearRange: [1900, 2100],
minDate: minDate,
showDaysInNextAndPreviousMonths: true,
enableSelectionDaysInNextAndPreviousMonths: true,
onSelect: function () {
console.log("Date selected:", picker.getDate()); // Debug log
updateRequiredAttributes(form);
},
});
// Store the Pikaday instance in the field
field._pikaday = picker;
// Sync calendar with manually entered dates
field.addEventListener("input", function (e) {
const dateValue = e.target.value;
const parsedDate = picker.parse(dateValue, "DD/MM/YYYY");
console.log("Input value:", dateValue); // Debug log
if (parsedDate && !isNaN(parsedDate)) {
picker.setDate(parsedDate, true);
} else if (!dateValue.trim()) {
picker.setDate(null); // Clear the Pikaday value
console.log("Pikaday state cleared."); // Debug log for confirmation
}
updateRequiredAttributes(form);
});
// Add forward slashes automatically
field.addEventListener("input", function (e) {
const input = e.target;
let value = input.value.replace(/D/g, "");
if (value.length > 2)
value = `${value.slice(0, 2)}/${value.slice(2)}`;
if (value.length > 5)
value = `${value.slice(0, 5)}/${value.slice(5)}`;
input.value = value;
updateRequiredAttributes(form);
});
});
// Form validation and submission logic
const t = document.getElementById("msg");
let r = false;
function n(e, t) {
i(e);
const r = document.createElement("span");
r.className = "error-message";
r.style.color = "red";
r.style.fontWeight = "bold";
r.textContent = t;
e.insertAdjacentElement("afterend", r);
}
function i(e) {
const t = e.parentElement.querySelector(".error-message");
t && t.remove();
}
function updateRequiredAttributes(form) {
form.querySelectorAll(".event").forEach((event) => {
const r = event.querySelector(".name"),
n = event.querySelector(".guardian"),
i = event.querySelector(".dob"),
p = event.querySelector(".school"),
o = event.querySelector(".class");
if (
r.value.trim() ||
n.value.trim() ||
i.value.trim() ||
p.value.trim() ||
o.value.trim()
) {
r.setAttribute("required", "required");
n.setAttribute("required", "required");
i.setAttribute("required", "required");
p.setAttribute("required", "required");
o.setAttribute("required", "required");
} else {
r.removeAttribute("required");
n.removeAttribute("required");
i.removeAttribute("required");
p.removeAttribute("required");
o.removeAttribute("required");
}
});
}
form.addEventListener("input", function (e) {
if (
["name", "guardian", "dob", "school", "class"].some((t) =>
e.target.classList.contains(t)
)
) {
i(e.target);
updateRequiredAttributes(form);
}
});
form.addEventListener("submit", function (i) {
i.preventDefault();
let o = false,
a = null;
document.querySelectorAll(".event").forEach((e) => {
const t = e.querySelector(".name"),
r = e.querySelector(".guardian");
t &&
"" !== t.value.trim() &&
t.value.trim().length < 3 &&
(n(t, "Competitor's Name must be at least 3 characters long."),
a || (a = t),
(o = true)),
r &&
"" !== r.value.trim() &&
r.value.trim().length < 3 &&
(n(r, "Guardian's Name must be at least 3 characters long."),
a || (a = r),
(o = true));
});
if ((a && a.focus(), o || r)) return;
r = true;
let l = document.getElementById("loading-animation");
if (!l) {
l = document.createElement("div");
l.id = "loading-animation";
l.innerHTML = '<div class="spinner"></div><p>Submitting...</p>';
document.body.appendChild(l);
}
const u = document.querySelector("button[type='submit']");
u.disabled = true;
u.innerText = "Submitting...";
const s = new FormData(form);
for (let d of s.entries()) console.log(d[0] + ": " + d[1]);
fetch(formConfigs[formId].apiUrl, { method: "POST", body: s })
.then((e) => {
if (!e.ok) throw Error("Network response was not ok");
return e.json();
})
.then((r) => {
console.log("Success:", r);
document.body.removeChild(l);
t.innerHTML = "Form Submitted Successfully";
t.style.display = "block";
setTimeout(() => {
t.innerHTML = "Redirecting...";
setTimeout(() => {
window.location.href = formConfigs[formId].redirectUrl;
}, 3000);
}, 2000);
form.reset();
u.innerText = "Submit";
})
.catch((e) => {
console.error("Error!", e.message);
document.body.removeChild(l);
t.innerHTML = "Error occurred! Please try again.";
t.style.display = "block";
setTimeout(() => {
t.innerHTML = "";
t.style.display = "none";
}, 5000);
u.disabled = false;
u.innerText = "Submit";
r = false;
});
});
const clearButton = document.getElementById("clearButton");
function clearForm() {
form.reset();
form
.querySelectorAll(".name, .guardian, .dob, .school, .class")
.forEach((e) => {
e.removeAttribute("required");
});
form.querySelectorAll(".dob").forEach((field) => {
const picker = field._pikaday;
if (picker) {
picker.setDate(null); // Reset Pikaday's internal date
console.log("Pikaday instance reset for field:", field); // Debug log
}
});
}
clearButton &&
clearButton.addEventListener("click", function (e) {
e.preventDefault();
confirm("Do you want to clear the form?") && clearForm();
});
}
});
});