最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Pikaday datepicker internal state is not cleared when dob field is cleared. It is not removing the required attribu

programmeradmin1浏览0评论

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:
        ";,
      redirectUrl: "./group2.html",
    },
    form2: {
      minDate: new Date(2016, 0, 1),
      apiUrl:
        ";,
      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();
        });
    }
  });
});

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论