填写所有必填字段时如何防止默认提交答案

【问题标题】：How to prevent default submission when ALL required fields are filled in填写所有必填字段时如何防止默认提交
【发布时间】：2020-03-01 00:27:41
【问题描述】：

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

【问题讨论】：

只有在所有必填字段都填写完毕后，我才需要它来防止默认提交....真的！！！
这是我的学校网络作业，真是令人沮丧

标签： javascript html forms event-handling dom-events

【解决方案1】：

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

但是，既然你问了，你可以使用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 元素上运行 checkValidity()，而不是在整个 FORM 元素上运行此 t 才能工作，这将花费更多时间来编写。

【讨论】：

是的，我知道这没有意义，但这就是我的任务所需要的。但是非常感谢！
没问题！祝你的任务好运:)

【解决方案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");
      }
    })

【讨论】：