我想知道是否有辦法在使用純 Javascript 以編程方式提交表單之前強制檢查表單上的必需輸入：
<form method="post" action="myController.php" id="myForm">
<input type="text" id="input1" required>
<input type="text" id="input2" required>
<input type="text" id="input3" required>
<input type="submit" onClick="return checkForm(event)" value="Save">
</form>
我的 Javascript 檔案：
function checkForm(e) {
e.preventDefault();
// Some other stuff
/*Prevalidate required inputs here*/
document.getElementById('myForm').submit();
}
我想知道是否有類似的東西：
if(document.getElementById('myForm').valid()) {
document.getElementById('myForm').submit()
}
在提交表單之前檢查所需的輸入，而無需直接通過代碼一一驗證。
uj5u.com熱心網友回復：
有 form.onSubmit 事件
但是如果你使用 HTML 5，你可以使用input.pattern正則運算式；如果輸入未通過檢查并且input元素將（在許多瀏覽器上）在其周圍獲得紅色邊框，則提交將被阻止。
uj5u.com熱心網友回復：
如果您需要在提交時進行一些自定義操作，您可以通過form.reportValidity()觸發驗證并回傳一個布林值，指示所有輸入是否都滿足其約束。
invalid如果您想在 UI 中做一些事情來標記它們，您還可以偵聽在驗證期間為每個無效輸入觸發的事件：
function onInvalid (e) {
e.target.classList.add('invalid');
}
const form = document.querySelector('form');
document.querySelectorAll('input').forEach(input => {
input.addEventListener('invalid', onInvalid);
});
form.addEventListener('submit', (e) => {
e.preventDefault();
const valid = form.reportValidity();
}).invalid {
border: 4px solid red;
}<form>
<input name="test1" required />
<input name="test2" required />
<input name="test3" required />
<input type="submit" />
</form>uj5u.com熱心網友回復：
利用 Form 屬性onsumbit提交表單，如果從函式checkForm回傳的值，如果所有欄位都被填充而不是動態地回傳布林值，則回傳布林值。
function checkForm(e) {
let valid = true;
inputs = document.querySelectorAll('[type="text"]')
for(input of inputs){
if(input.value.trim()==''){
valid = false;
break;
}
}
return valid;
}<form method="post" id="myForm" action='test.php' onsubmit="return checkForm(this)">
<input type="text" id="input1" required>
<input type="text" id="input2" required>
<input type="text" id="input3" required>
<input type="submit" value="Save">
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/358256.html
標籤：javascript html 形式