отправить форму подтверждения.Форма отправляется даже при наличии ошибок

Question

Я создал страницу регистрации, и каждое поле требует ввода и проверки.Я использовал событие onsubmit для вызова моей функции js для проверки формы, если поле пустое, однако оно все равно отправляется, даже если оно не было правильно проверено.

function validate() {
  var streetName = document.getElementById("sN").value;


  if (streetName == "" || streetName == null || streetName == undefined) {
    window.alert("Sorry");
    return false;
  }
}

<form name="myForms" action="https://httpbin.org/post " method="post" class="form" onsubmit="return validate()">

  <div id="fN">
    <label>First Name</label>
    <input type="text" name="firstName" placeholder="Enter first name" required>
  </div>

  <br>

  <div class="lN">
    <label>Last Name</label>
    <input type="text" name="lastName" placeholder="Enter last name" required="">
  </div>

  <br>

  <div class="sN">
    <label>Street name</label>
    <input type="text" name="streetname" placeholder="Enter your street name">
  </div>



  // Somemore inputs

  <input class="buttons" type="submit" name="submit" value="Sign up" onclick="validate()">

</form>

Я ожидаю всплывающее окно с сообщением "эта запись неправильна и по этой причине", но оно все равно отправляется

РЕДАКТИРОВАТЬ: Iпрошу прощения, я должен был быть более ясным в своем посте.Я буду использовать обязательные для некоторых входных данных, однако в конечном итоге мне потребуется написать js-код, чтобы убедиться, что телефонный номер состоит из всех цифр, а пароль = passwordconfirm, а почтовый код - это действительный почтовый индекс.В файле JS я только что показал, что я в основном пытался делать.

Answer 1

Несколько вещей

1. Вы должны подтвердить при отправке И в форме отправки
2. Вы НИКОГДА не должны вызывать что-либо в форме «отправить», так как это будет скрывать событие отправки /method
3. Вам нужно получить правильное поле
4. Дайте форме идентификатор и используйте такой ненавязчивый код

window.addEventListener("load", function() {
  document.getElementById("myForm").addEventListener("submit", function(e) {
    var errors = false;
    var streetName = this.streetname.value.trim(); // no more action needed
    if (!streetName) errors = true;
    // more validations
    if (errors) {
      window.alert("Sorry");
      e.preventDefault();
    }  
  });
});

<form id="myForm" action="https://httpbin.org/post " method="post" class="form">
  <div id="fN">
    <label>First Name</label>
    <input type="text" name="firstName" placeholder="Enter first name" >
  </div>

  <br>

  <div class="lN">
    <label>Last Name</label>
    <input type="text" name="lastName" placeholder="Enter last name" >
  </div>

  <br>

  <div class="sN">
    <label>Street name</label>
    <input type="text" name="streetname" placeholder="Enter your street name">
  </div>

  <input class="buttons" type="submit" name="SubmitButton" value="Sign up">

</form>

Answer 2

var streetName = document.getElementById("sN").value;

В документе нет элемента с этим id.

Существует элемент с sN в качестве имени класса ,но getElementById не найдет элемент по его классу, а value из <div class="sN"> будет всегда быть undefined.Это input, который будет иметь значение.