[英]How to prevent default submission when ALL required fields are filled in
<div class="container">
<form action="">
<fieldset id="contactform">
<legend>Contact Information</legend>
<div id="name">
<div class="info">
<label for="name">Name*<br><br></label>
<input type="text" required>
</div>
</div>
<div id="email">
<div class="info">
<label for="email"> Email*<br><br></label>
<input type="email" required>
</div>
</div>
<div id="msg">
<div class="info">
<label for="message"> Your Message*<br><br></label>
<textarea required id="textarea" cols="25" rows="5"></textarea>
</div>
</div>
<div id="sub">
<input id ="defaultsub" type="submit">
</div>
</fieldset>
</form>
</div>
這是我到目前為止所擁有的,它阻止了默認提交,除非它擺脫了 html5 驗證。 我想知道如何在我的代碼中同時擁有兩者?
document.getElementById("defaultsub").addEventListener("click", function(event){
event.preventDefault();
console.log("Prevent default submission");
alert("ALERT!!!!!");
})
好吧,我不知道為什么您希望它僅在填寫所有必填字段時阻止默認提交。
但是,既然你問了,你可以使用document.querySelector('form')
.checkValidity()方法來檢查表單是否有效。 在您的情況下,您可以像這樣使用它
document.getElementById("defaultsub").addEventListener("click", function(event){
if(document.querySelector('form').checkValidity()){
event.preventDefault();
console.log("Prevent default submission");
alert("ALERT!!!!!");
}
})
僅當表單有效時,這將阻止默認表單提交(如果所有必填字段都已填寫)
編輯:
您可能必須在所需的 INPUT 元素而不是整個 FORM 元素上運行checkValidity()
才能使此checkValidity()
工作,這將需要更多的時間來編寫。
嘗試以下操作,您需要檢查是否缺少任何字段:
document.getElementById("defaultsub").addEventListener("click", function(event){
var els = document.querySelectorAll('input[type=text], input[type=email], textarea');
let allFields=true;
for(let i = 0; i < els.length; i++){
if(!els[i].value.trim()){
allFields=false;
break;
}
}
if (allFields) {
event.preventDefault();
console.clear();
console.log("Prevent default submission");
}
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.