Почему переходит по action в форме, когда по скрипту не должно?

Question

[Alexander B]

Вот рабочяя форма:
plnkr.co/edit/2u0U9S5nZlcurphOZEAG?p=preview

У меня по сути одна форма: joxi.ru/gmvz1GeH9aX6ma
И все работает так же, но переходит по action, даже если форма невалидна. Можете ли подсказать, в чем проблема?

Код:

Тут код формы

<form action="call-order.php" method="post">
				<div class="hold-input">
					<input type="text" name="phone" placeholder="Пример: [phone]"/>
				</div>
				<div class="hold-btn">
					<button class="btn" onclick="validate(this.form)" type="submit">Заказать звонок</button>
				</div>
			</form>

Тут код скрипта

<script>
    function showError(container, errorMessage) {
      container.className = 'error';
      var msgElem = document.createElement('span');
      msgElem.className = "error-message";
      msgElem.innerHTML = errorMessage;
      container.appendChild(msgElem);
    }

    function resetError(container) {
      container.className = '';
      if (container.lastChild.className == "error-message") {
        container.removeChild(container.lastChild);
      }
    }

    function validate(form) {
      var elems = form.elements;

      resetError(elems.phone.parentNode);
      if (!elems.phone.value) {
        showError(elems.phone.parentNode, 'Укажите телефон');

      }

    }
  </script>

Comments

[Lynn «Кофеман»]

В скрипте нет никакого «не должно»

Answer 1

[Максим Соловьёв]

Код сам по себе хреновый, но если не углубляться, можно сделать так:

function validate(form) {
      form.preventDefault()
      var elems = form.elements;

      resetError(elems.phone.parentNode);
      if (!elems.phone.value) {
        showError(elems.phone.parentNode, 'Укажите телефон');

      }
     
    }