如果這是一個(gè)簡(jiǎn)單的問(wèn)題，請(qǐng)道歉，因?yàn)槲覍?duì)JavaScript還很陌生。我有一個(gè)腳本，通過(guò)檢查文本字段是否為空來(lái)驗(yàn)證用戶(hù)輸入。如果它不是空的，則確認(rèn)窗口會(huì)提示用戶(hù)確保在提交表單和上載信息之前繼續(xù)操作。我想知道如何使用下面的代碼或類(lèi)似代碼在同一頁(yè)面上驗(yàn)證多個(gè)表單，因?yàn)槟壳拔抑荒茏屗c一個(gè)表單一起使用？我嘗試過(guò)各種解決方案，但沒(méi)有一個(gè)成功。我甚至嘗試復(fù)制/粘貼整個(gè)腳本并更改其中的相關(guān)元素。我已經(jīng)將我對(duì)代碼的更改剝離回它實(shí)際正常工作的位置。就像我說(shuō)的，一旦我嘗試重用它來(lái)驗(yàn)證多個(gè)表單，代碼就會(huì)停止正常工作。// 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(); } } }}我想要一個(gè)能夠驗(yàn)證頁(yè)面上任何HTML的腳本，而不僅僅是第一個(gè)。form
1 回答
慕容708150
TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超4個(gè)贊
我們只需獲取所有表單，循環(huán)，獲取每個(gè)表單所需的輸入和按鈕，并為每個(gè)表單，每個(gè)元素設(shè)置偵聽(tīng)器。
下面是一個(gè)代碼片段，解釋了如何做到這一點(diǎn)。
// 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>
回答后
您的示例中存在重復(fù)id
<form action='editevent.php?updaterow=$iddata' method='POST' id='updateEventTitle'>
<input type='text' id='updateEventTitle'
這是無(wú)效的，可能會(huì)在將來(lái)導(dǎo)致問(wèn)題。 應(yīng)該是唯一的。id
- 1 回答
- 0 關(guān)注
- 119 瀏覽
添加回答
舉報(bào)
0/150
提交
取消