Простое событие проверки при клике на кнопку?

Question

[L1nw0od]

Всем привет. Помогите пожалуйста правильно сделать событие проверки при клике на кнопку.

<form action="">
    <input type="text" class="test-input" id="testInput">
    <input type="submit" id="proverka" value="Отправить" onclick="SendPost();">
  </form>

  <script>
    function SendPost() {

      testInput.addEventListener('keyup', function (event) {

        let length = this.value.length

        if (length < 9) alert('Заполните')
        else(
          alert('Все заполнено')
        )
      })

    }
  </script>

Answer 1

[ArtJH]

1) самое простое это атрибут required, добавляешь в input
2) Если через js, то

let input = document.querySelector("#testInput");
 let length = input.value.length;
if (length < 9) alert('Заполните')
        else(
          alert('Все заполнено')
        )

Comments

[L1nw0od]

Могли бы подсказать почему не срабатывает скрипт.
Я хочу отправить форму если в ней заполнено поле инпут если нет вывожу уведомление.
Но если поле не заполнено - форма не отправляется и уведомление не высвечивается.
Я использую вот такую инпут маску.

$(".phone__input").inputmask({"mask": "[phone]"});
    $(document).ready(function () {
        $('[data-mask]').inputmask();
    })

И вот сам скрип отправки

$(document).ready(function () {         
          // после загрузки DOM
          $('#forma2').submit(function (e) { // вешаем событие на отправку формы
              e.preventDefault(); // выключаем стандартное действие отправки
              var form = $(this); // запомним форму в переменной
              // добавим небольшую секцию проверки на заполненность
              var errors = false; // сначала ошибок нет
              form.find('.req').each(function () { // пройдем по каждому полю с классом .req в форме
                  $(this).removeClass('error'); // сначала уберем у него класс с ошибкой, на случай если он там есть
                  if ($(this).val() == '') { // если оно пустое
                      $(this).addClass('error'); // добавим к нему класс с ошибкой
                      errors = true; // найдена ошибка
                  }
              });
              if (errors) return false; // если есть ошибка то больше ничего не делаем
              var data = form.serialize(); // сериализуем данные формы в строку для отправки, обратите внимание что атрибуты name у полей полностью сопдают с нэймами у полей самой гугл формы
              $.ajax({ // инициализируем аякс
                  url: "https://docs.google.com/forms/u/0/d/e/KEYXXXXXXXXXXXXXXXXXXXVw/formResponse", // слать надо сюда, строку с буковками надо заменить на вашу, это атрибут action формы
                  data: data, // данные  которые мы сериализовали
                  type: "POST", // постом
                  dataType: "xml", // ответ ждем в формате xml
                  beforeSend: function () { // перед отправкой
                      form.find('.send__form').attr('disabled'); // отключим кнопку
                  }
                  , statusCode: { // после того как пришел ответ от сервера
                      0: function () { // это успешный случай
                          form.html('<h4 style="color: #fff;">Спасибо, Ваш заявка отправлена!</h4><p style="color: #fff;">Я вам перезвоню в течении 30-ти минут.</p>'); // сунем в форму сообщение что все ок
                      }
                      , 200: function () { // это тоже успешный случай
                          form.html('<h4 style="color: #fff;">Спасибо, Ваш заявка отправлена!</h4><p style="color: #fff;">Я вам перезвоню в течении 30-ти минут.</p>'); // сунем в форму сообщение что все ок
                      }
                  }
              });
          });
      });

Вообще все работает отправляет но хочу добавить проверку поля (

[ArtJH]

L1nw0od,
добавляете в структуру под input параграф с текстом ошибки, делаете его прозрачным, потом в js

if (errors){
classList.add("active");
}

Класс active делает его видимым

Один из вариантов

[L1nw0od]

ArtJH, Не понял (

[L1nw0od]

ArtJH, Может я неправильно в структуру добавил код ?