如果這是一個簡單的問題，請道歉，因為我對JavaScript還很陌生。我有一個腳本，通過檢查文本字段是否為空來驗證用戶輸入。如果它不是空的，則確認窗口會提示用戶確保在提交表單和上載信息之前繼續操作。我想知道如何使用下面的代碼或類似代碼在同一頁面上驗證多個表單，因為目前我只能讓它與一個表單一起使用？我嘗試過各種解決方案，但沒有一個成功。我甚至嘗試復制/粘貼整個腳本并更改其中的相關元素。我已經將我對代碼的更改剝離回它實際正常工作的位置。就像我說的，一旦我嘗試重用它來驗證多個表單，代碼就會停止正常工作。// Set up event handlers in JavaScriptdocument.querySelector('form').addEventListener('submit', validationCheck);document.getElementById('updateEventTitle').addEventListener('keyup', validationCheck);// Get your DOM references just once, not every time the function runslet 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
1 回答
慕容708150
TA貢獻1831條經驗 獲得超4個贊
我們只需獲取所有表單，循環，獲取每個表單所需的輸入和按鈕，并為每個表單，每個元素設置偵聽器。
下面是一個代碼片段，解釋了如何做到這一點。
// getting all forms
const elForms = [...document.querySelectorAll('form')];
// looping an array
elForms.map(elForm => {
// Get your DOM references just once, not every time the function runs
const elInput = elForm.querySelector(`input[type='text']`);
const elButton = elForm.querySelector(`input[type='submit']`);
// Set up event handlers in JavaScript
elForm.addEventListener('submit', (event) => validationCheck(event, elInput, elButton)); // passing parameters
elInput.addEventListener('keyup', (event) => validationCheck(event, elInput, elButton)); // passing parameters
});
function validationCheck(event, elInput, elButton) {
if(elInput.value==='') {
elButton.disabled = true;
} else {
elButton.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();
}
}
}
}
<form action='editevent.php?updaterow=$iddata' method='POST' id='updateEventTitle'>
<input type='text' id='updateEventTitle' name='myUpdateEventTitle' size='30' maxlength='40' placeholder='$row[eventName]' required>
<input class='btn btn-primary btn-sm' type='submit' name='updateEventTitle' value='Update' id='updateBtn' disabled>
</form>
<form action='editevent.php?updaterow=$iddata' method='POST' id='updateEventDate'>
<input type='text' id='updateEventDate' name='myUpdateEventDate' size='15' maxlength='10' placeholder=$eventDate required/>
<input class='btn btn-primary btn-sm' type='submit' name='updateEventDate' value='Update' id='updateBtn' disabled>
</form>
<form action='editevent.php?updaterow=$iddata' method='POST' id='updateEventTime'>
<input type='text' id='updateEventTime' name='myUpdateEventTime' size='15' maxlength='5' placeholder=$eventTime required/>
<input class='btn btn-primary btn-sm' type='submit' name='updateEventTime' value='Update' id='updateBtn' disabled>
</form>
回答后
您的示例中存在重復id
<form action='editevent.php?updaterow=$iddata' method='POST' id='updateEventTitle'>
<input type='text' id='updateEventTitle'
這是無效的，可能會在將來導致問題。 應該是唯一的。id
- 1 回答
- 0 關注
- 131 瀏覽
添加回答
舉報
0/150
提交
取消