Modal won't hide

Question

The modal is designed to appear when there is an empty filled that has no value except some input fields. It shows up, yes, but after clicking OK, It won't hide.

I did some troubleshoot but nothing really happened. Any advise or help would be appreciated.

                <!--Required Fields modal -->
      <div id="requiredFieldsModal" class="hidden fixed flex top-0 left-0 w-full h-full items-center justify-center bg-black bg-opacity-50">
          <div class="bg-white p-5 rounded-lg text-center">
              <h2 class="mb-4">Please fill in all required fields.</h2>
              <button id="confirmFill" class="mr-2 px-4 py-2 bg-yellow-400 hover:bg-yellow-500 text-white rounded">OK</button>
          </div>
      </div>

      <script>
        document.addEventListener('DOMContentLoaded', () => {
          const form = document.querySelector('form');
          const inputs = form.querySelectorAll('input');
          const requiredFieldsModal = document.querySelector('#requiredFieldsModal');
          const confirmFill = document.querySelector('#confirmFill');

          form.addEventListener('submit', (event) => {
            console.log('Form submitted'); // Add this line to check if the code is being triggered

            let hasEmptyField = false;

            inputs.forEach((input) => {
              if (input.value.trim() === '' && input.name !== 'email' && input.name !== 'contactNumber' && input.name !== 'endOfEmployment') {
                hasEmptyField = true;
              }
            });

            if (hasEmptyField) {
              event.preventDefault();
              requiredFieldsModal.classList.remove('hidden');
            }
          });

          confirmFill.addEventListener('click', () => {
            requiredFieldsModal.classList.add('hidden');
          });
        });
      </script>

Answer 1

Your code don't work because has error in this lines:

const form = document.querySelector('form');
const inputs = form.querySelectorAll('input');

form is undefined so form.querySelectorAll is not run and next codes is not run!

just change code:

<form
  id="requiredFieldsModal"
  class="fixed flex top-0 left-0 w-full h-full items-center justify-center bg-black bg-opacity-50"
>
  <div class="bg-white p-5 rounded-lg text-center">
    <h2 class="mb-4">Please fill in all required fields.</h2>
    <input />
    <button
      id="confirmFill"
      class="mr-2 px-4 py-2 bg-yellow-400 hover:bg-yellow-500 text-white rounded"
    >
      OK
    </button>
  </div>
</form>

or change js codes to this:

document.addEventListener("DOMContentLoaded", () => {
  const form = document.querySelector("form");
  const confirmFill = document.querySelector("#confirmFill");
  if (form) {
    const inputs = form.querySelectorAll("input");
    const requiredFieldsModal = document.querySelector("#requiredFieldsModal");

    form.addEventListener("submit", (event) => {
      console.log("Form submitted"); // Add this line to check if the code is being triggered

      let hasEmptyField = false;

      inputs.forEach((input) => {
        if (
          input.value.trim() === "" &&
          input.name !== "email" &&
          input.name !== "contactNumber" &&
          input.name !== "endOfEmployment"
        ) {
          hasEmptyField = true;
        }
      });

      if (hasEmptyField) {
        event.preventDefault();
        requiredFieldsModal.classList.remove("hidden");
      }
    });
  }

  confirmFill.addEventListener("click", () => {
    requiredFieldsModal.classList.add("hidden");
  });
});

it is working fine!