Как предотвратить отправку по умолчанию, когда ВСЕ обязательные поля заполнены

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

Answer 2

Ну, я не знаю, почему вы хотите, чтобы он запрещал отправку по умолчанию, только когда ВСЕ обязательные поля заполнены IN.

Но, как вы и просили, вы можете использовать метод 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!!!!!");
}
})

Это предотвратит отправку формы по умолчанию ТОЛЬКО если форма действительна (AKA, если заполнены все обязательные поля)

РЕДАКТИРОВАТЬ:

Возможно, вам придется запустить checkValidity() на необходимых элементах INPUT вместо всего элемента FORM для этой работы, что займет немного больше времени для написать.