Функция проверки формы JavaScript не работает

Question

Я хочу проверить эту форму, и у меня написан javascript, но когда я нажимаю submit , он ничего не делает.

Только pattern=[a-zA-Z] работа

function validation() {
  var name = document.getElementById('name').value;
  var surname = document.getElementById('surname').value;
  var message = document.getElementById('message').value;
  var email = document.getElementById('email').value;

  if (name == '' || surname == '' || message == '' || email == '') {
    document.getElementById("eresult").innerHTML = "All fields required"
    return false;
  } else if (name.length < 2) {
    document.getElementById("eresult").innerHTML = "Name must be atleast 2 charachters"
  } else {
    return true;
  }
}

<aside id="sidebar">
  <div class="dark">
    <form action="#" name="form" method="POST" onsubmit="return validation();">
      <h3>Get A Quote</h3>

      <div>
        <label>Name</label><br>
        <input type="text" name="name" id="name" placeholder="Name" pattern="[a-zA-Z]*">
      </div>
      <div>
        <label>Surname</label><br>
        <input type="text" name="surname" id="surname" placeholder="Surname" pattern="[a-zA-Z]*">
      </div>

      <div>
        <label>Email</label><br>
        <input type="email" name="email" id="email" placeholder="Email Address">
      </div>

      <div>
        <label>Message</label><br>
        <textarea type="message" name="message" id="email" minlength="1" maxlength="200" placeholder="Message(max 200 characters)"></textarea>
      </div>

      <input type="submit" name="submit" value="Submit">
    </form>
    <div id="eresult" style="color:red;"></div>
  </div>
</aside>
<footer>
  <p>Renars Web Design, Copyright &copy; 2019</p>
</footer>

Я ожидаю, что если я не введу все поля, должно появиться сообщение "Все поля обязательны для заполнения" но он просто отправляет форму.

Answer 1

У вас есть ошибка в вашем коде.Просмотрите журнал ошибок консоли.

В сообщении textarea указан неверный идентификатор.

Другими словами, идентификатор «email» дублируется.

Answer 2

Использование атрибута required:

Просто добавьте атрибут required к каждому входу, если вы хотите сделать ввод обязательным.

Когда этот атрибут установлен, форма не будет отправлена ​​(и будет отображать сообщение об ошибке), когда ввод пуст (вход также будет считаться недействительным).

---

Проверьте следующее Фрагмент кода и попробуйте отправить форму без заполнения некоторых или всех полей, чтобы увидеть, как работает атрибут required:

<form action="#" name="form" method="POST">
  <div>
    <label>Name</label><br>
    <input type="text" name="name" id="name" placeholder="Name" pattern="[a-zA-Z]*" required>
  </div>
  <div>
    <label>Surname</label><br>
    <input type="text" name="surname" id="surname" placeholder="Surname" pattern="[a-zA-Z]*" required>
  </div>

  <div>
    <label>Email</label><br>
    <input type="email" name="email" id="email" placeholder="Email Address" required>
  </div>

  <div>
    <label>Message</label><br>
    <textarea type="message" name="message" id="email" minlength="1" maxlength="200" placeholder="Message(max 200 characters)" required></textarea>
  </div>
  <input type="submit" name="submit" value="Submit">
</form>

---

Использование функции JavaScript:

В JS, а также в HTML необходимо исправить несколько вещей:

1. Измените input type="submit" на button type="button", чтобы кнопка отправки запускала функцию в первую очередь вместо прямой попытки отправки формы. Кроме того, не забудьте изменить значение атрибута name и значение атрибута id submit на другое значение, например submitBtn или submitForm, так что вы можете вручную запустить метод submit() позже в функции.
2. Добавьте элемент с идентификатором "eresult", где ваша функция проверки может отправить сообщения об ошибках в.
3. Добавьте прослушиватель кликов к кнопке отправки, чтобы запустить функцию проверки.
4. Измените значение атрибута id вашего элемента textarea на message.
5. Используйте тот же if/else statement, который у вас уже есть, но добавьте return false; к своему выражению else if и добавьте form.submit() до вашего окончательного else заявления выше return true;.

NB Нам пришлось ранее изменить атрибут name и id вашей кнопки отправки, чтобы form.submit() ссылался на метод submit(), а не кнопку отправки в функция проверки.

---

Проверьте и запустите следующий Фрагмент кода для практического примера того, что я описал выше:

/* JavaScript */

document.querySelector("button").addEventListener("click", function(){
  var name = document.getElementById('name').value;
  var surname = document.getElementById('surname').value;
  var message = document.getElementById('message').value;
  var email = document.getElementById('email').value;
  if(name=='' || surname=='' || message=='' || email==''){
    document.getElementById("eresult").innerHTML = "All fields required"
    return false;
  }
  else if(name.length<2){
    document.getElementById("eresult").innerHTML = "Name must be atleast 2 charachters"
    return false;
  }

  else{
    form.submit();
    return true;
    
  }
});

<!-- HTML -->

<form action="#" name="form" method="POST">
  <div>
    <label>Name</label><br>
    <input type="text" name="name" id="name" placeholder="Name" pattern="[a-zA-Z]*">
  </div>
  <div>
    <label>Surname</label><br>
    <input type="text" name="surname" id="surname" placeholder="Surname" pattern="[a-zA-Z]*">
  </div>

  <div>
    <label>Email</label><br>
    <input type="email" name="email" id="email" placeholder="Email Address">
  </div>

  <div>
    <label>Message</label><br>
    <textarea type="message" name="message" id="message" minlength="1" maxlength="200" placeholder="Message(max 200 characters)"></textarea>
  </div>
  <button type="button" name="submitBtn">Submit</button>
</form>
<div id="eresult"></div>