Как проверять не пустое ли поле input?

Question

[marq]

есть страница заявки, которая разделена на этапы(1-этап, фио, 2 этап текст сообщения и т.д), то есть пользователь вводит данные по этапно, как сделать валидацию полей на каждом этапе

<div class="col-12">
                    <div class="form-label-group mb-4">
                      <textarea id="form_message" name="message" class="form-control" placeholder="Your message"
                        rows="5" required="required" data-error="Введите сообщение" maxlength="500"></textarea>
                      <label for="form_message" id="content_html"></label>
                      <div class="help-block with-errors"></div>
                    </div>
                  </div>
                  <!-- /column -->
                  <div class="col-12 text-center">
                    <a href="#" class="more hover link-violet first-step-button">Дальше</a>
                  </div>

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

Comments

[Ankhena]

Через :valid, :invalid, :placeholder-shown
Тут есть пример https://qna.habr.com/q/1055038

Но не забывайте, что основная валидация должна проходить на сервере.

Answer 1

[Alex_mos]

нужно пытаться искать

Answer 2

[misha356]

let form_msg = document.getElementById('form_message')
let send = document.getElementsByClassName('more hover link-violet first-step-button')
let errors = document.getElementsByClassName('help-block with-errors')
send.onclick = function () {
  if (form_msg.value !== null) {
    // если не пустой
  } else {
    let err = document.createElement('p')
    err.innerHTML = '[ТЕКСТ ОШИБКИ]'
    errors.appendChild(err)
  }
}