JavaScript函数，可以验证网页上的多个表单

Question

如果这是一个简单的问题，请道歉，因为我对JavaScript还很陌生。我有一个脚本，通过检查文本字段是否为空来验证用户输入。如果它不是空的，则确认窗口会提示用户确保在提交表单和上载信息之前继续操作。

我想知道如何使用下面的代码或类似代码在同一页面上验证多个表单，因为目前我只能让它与一个表单一起使用？我尝试过各种解决方案，但没有一个成功。我甚至尝试复制/粘贴整个脚本并更改其中的相关元素。

我已经将我对代码的更改剥离回它实际正常工作的位置。就像我说的，一旦我尝试重用它来验证多个表单，代码就会停止正常工作。

// Set up event handlers in JavaScript

document.querySelector('form').addEventListener('submit', validationCheck);

document.getElementById('updateEventTitle').addEventListener('keyup', validationCheck);

// Get your DOM references just once, not every time the function runs

let eventTitle = document.getElementById('updateEventTitle');

let btnUpdate = document.getElementById('updateBtn');

function validationCheck(event) {

  if (eventTitle.value === '') {

    btnUpdate.disabled = true;

  } else {

    btnUpdate.disabled = false;

    //Confirmation window

    if (event.type === 'submit') {

      //Confirmation window

      var r = confirm('Do you want to update this item?');

      if (r == true) {

        window.location.href = 'server.php';

      } else {

        event.preventDefault();

      }

    }

  }

}

我想要一个能够验证页面上任何HTML的脚本，而不仅仅是第一个。form




Answer 1

我们只需获取所有表单，循环，获取每个表单所需的输入和按钮，并为每个表单，每个元素设置侦听器。下面是一个代码片段，解释了如何做到这一点。// getting all formsconst elForms = [...document.querySelectorAll('form')];// looping an arrayelForms.map(elForm => {&nbsp; // Get your DOM references just once, not every time the function runs&nbsp; const elInput&nbsp; = elForm.querySelector(`input[type='text']`);&nbsp; const elButton = elForm.querySelector(`input[type='submit']`);&nbsp; // Set up event handlers in JavaScript&nbsp; elForm.addEventListener('submit', (event) => validationCheck(event, elInput, elButton)); // passing parameters&nbsp; elInput.addEventListener('keyup', (event) => validationCheck(event, elInput, elButton)); // passing parameters});function validationCheck(event, elInput, elButton) {&nbsp; &nbsp; if(elInput.value==='') {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; elButton.disabled = true;&nbsp;&nbsp; &nbsp; } else {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; elButton.disabled = false;&nbsp; &nbsp; &nbsp; &nbsp; //Confirmation window&nbsp; &nbsp; &nbsp; &nbsp; if(event.type === 'submit'){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Confirmation window&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var r =confirm('Do you want to update this item?');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (r==true)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.location.href = 'server.php';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}<form action='editevent.php?updaterow=$iddata' method='POST' id='updateEventTitle'>&nbsp; &nbsp; &nbsp;<input type='text' id='updateEventTitle' name='myUpdateEventTitle' size='30' maxlength='40' placeholder='$row[eventName]' required>&nbsp; &nbsp; &nbsp;<input class='btn btn-primary btn-sm' type='submit' name='updateEventTitle' value='Update' id='updateBtn' disabled>&nbsp;</form><form action='editevent.php?updaterow=$iddata' method='POST' id='updateEventDate'>&nbsp; &nbsp; &nbsp;<input type='text' id='updateEventDate' name='myUpdateEventDate' size='15' maxlength='10' placeholder=$eventDate required/>&nbsp;&nbsp; &nbsp; &nbsp;<input class='btn btn-primary btn-sm' type='submit' name='updateEventDate' value='Update' id='updateBtn' disabled>&nbsp;</form><form action='editevent.php?updaterow=$iddata' method='POST' id='updateEventTime'>&nbsp; &nbsp; &nbsp;<input type='text' id='updateEventTime' name='myUpdateEventTime' size='15' maxlength='5' placeholder=$eventTime required/>&nbsp;&nbsp; &nbsp; &nbsp;<input class='btn btn-primary btn-sm' type='submit' name='updateEventTime' value='Update' id='updateBtn' disabled>&nbsp;</form>回答后您的示例中存在重复id<form action='editevent.php?updaterow=$iddata' method='POST' id='updateEventTitle'>&nbsp; <input type='text' id='updateEventTitle'这是无效的，可能会在将来导致问题。 应该是唯一的。id