当填写了所有必填字段时，如何防止默认提交

Question

<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!!!!!");
})

Answer 1

好吧，我不知道为什么你只希望它在填写了所有必填字段时阻止默认提交。

但是，既然您提出了要求，您可以使用document.querySelector('form').checkValidaty((方法来检查表单是否有效。在你的情况下，你可以像这个一样使用它

document.getElementById("defaultsub").addEventListener("click", function(event){
if(document.querySelector('form').checkValidity()){
event.preventDefault();
console.log("Prevent default submission");
alert("ALERT!!!!!");
}
})

只有当表单有效时，这将阻止默认表单提交(也就是说，如果填写了所有必填字段(

编辑：

您可能必须在所需的INPUT元素上运行checkValidity()，而不是在整个FORM元素上才能运行，这将需要更多的编写时间。

Answer 2

尝试以下操作，您需要检查是否缺少任何字段：

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");
}
})