как сформировать валидацию вручную в javascript

Question

<form id="myForm"> 
  <input type="text" required />
  <button class="btn btn-primary" id="next-button"  type="submit">Next</button>
</form>

в коде javascript

var nextButton = document.getElementById("next-button");
  nextButton.addEventListener("click", function(e){
    e.preventDefault();
    console.log("Next Button Clicked!");
    // Do some other work.
    form.submit();
  });

Если я запускаю этот код с пустым текстовым полем, форма отправляет, что не должно этого делать.Если я удалю поле Id в кнопке отправки, проверка работает.В чем моя проблема здесь?или как я могу проверить форму вручную в JavaScript?

Answer 1

Проверить правильность формы можно следующим образом:

var nextButton = document.getElementById("next-button");
var form = document.getElementById("myForm");
  nextButton.addEventListener("click", function(e){
    if(form.checkValidity()) {
      e.preventDefault();
      alert("Next Button Clicked!");
      // Do some other work.
      form.submit();
    }
  });

Answer 2

У вас здесь происходит пара вещей.

Если я запускаю этот код с пустым текстовым полем, форма отправляет, который не должен этого делать.Если я удаляю поле> Id в кнопке отправки, проверка работает.В чем моя проблема здесь?

Это потому, что ваш javascript, по сути, вступает во владение и фактически не выполняет никакой проверки.Он предотвращает поведение кнопки по умолчанию, записывает сообщение в консоль и затем отправляет форму.

Когда вы удаляете значение идентификатора из кнопки, этот javascript не работает, потому что идентификатор элемента, который вы сказали ему искать, не существует.Причина, по которой он проверяет, заключается в том, что теперь ваш Javascript не вступает во владение, а нативная для браузера проверка обнаруживает атрибут 'required', который вы поместили в свои входные данные.

У вас есть два пути вперед, либо используйтепроверка собственного браузера https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

Или создайте свой собственный с помощью JavaScript.(Существует множество способов сделать это, использовать Google и поработать с несколькими примерами, которые вы найдете).

Answer 3

Если вы не хотите, чтобы форма отправлялась до тех пор, пока вы явно не скажете это сделать, замените type="submit" на type="button" в теге <button>.Первый автоматически отправляет форму при нажатии.