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

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>

---

This is what I have so far and it prevents the default submission except it gets rid of the html5 validation. I was wondering how to have both in my code?

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

Answer 1

Well, I don't know why you would want it to only prevent default submission when ALL required fields are filled IN.

But, since you asked, you can use the document.querySelector('form') .checkValidity() method which will check if the form is valid. In your case, you can use it like this

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

This will prevent default form submission ONLY if the form is valid (AKA if all required fields are filled in)

EDIT:

You might have to run the checkValidity() on the required INPUT elements instead of the whole FORM element for this tto work, which will take a little more time to write.

Answer 2

Try the below, you need to check if any field is missing:

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