模态不会隐藏

Question

模式被设计为当有一个空的填充时出现，除了一些输入字段之外没有任何值。是的，它会显示，但是点击确定后，它不会隐藏。

我做了一些故障排除，但什么也没发生。任何建议或帮助将不胜感激。

                <!--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

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' );
    } else
    {
      requiredFieldsModal.classList.add( 'hidden' );
    }
  } );

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

 .hidden {
    display: none;
}

<form>
  <input type="text" name="name" placeholder="Name" value="">
  <input type="email" name="email" placeholder="Email" value="[email protected]">
  <input type="number" name="contactNumber" placeholder="Contact Number" value="9874563210">
  <input type="date" name="endOfEmployment" placeholder="End Of Employment" value="2024-03-29">
  <button type="submit">Submit</button>
</form>
<!--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>