как проверить, заполнен ли input?

Есть форма с инпутами, нужно проверить пустой ли инпут. Если пустой, то появляется модалка с ошибкой, а если все инпуты заполнены, появляется модалка о успешной отправке

<form action="https://echo.htmlacademy.ru" method="POST" id="form-main" class="form-first">
  <div class="form__inner form__inner--first">
    <div class="form__impression">
      <div class="form__impression-title">Ваше общее впечатление:</div>

      <div class="form__input">
        <input type="radio" name="input-radio" checked class="form-impression__input" id="positive-opinion">
        <label class="input__label" for="positive-opinion">Скорее положительное</label>
      </div>

      <div class="form__input">
        <input type="radio" name="input-radio" class="form-impression__input" id="negative-opinion">
        <label class="input__label" for="negative-opinion">Скорее отричательное</label>
      </div>

      <div class="form__input">
        <input type="radio" name="input-radio" class="form-impression__input" id="no-answer">
        <label class="input__label" for="no-answer">Затрудняюсь ответить</label>
      </div>
    </div>

    <div class="form__full-name">
      <div class="form__impression-title form__title--name">Представьтесь:</div>

      <div class="form__input form__input--name">
        <label class="full-name__label" title="Введите в поле ваше имя" for="name">Имя*:</label>
        <input type="text" name="input-name" class="form-input form__full-name-input" id="name" placeholder="Имя" required>
      </div>

      <div class="form__input form__input--name">
        <label class="full-name__label" title="Введите в поле вашу фамилию" for="surname">Фамилия*:</label>
        <input type="text" name="input-surname" class="form-input form__full-name-input" id="surname" placeholder="Фамилия" required>
      </div>

      <div class="form__input form__input--name">
        <label class="full-name__label" title="Введите в поле ваше отчество" for="patronymic">Отчество:</label>
        <input type="text" name="input-patronymic" class="form-input form__full-name-input" id="patronymic" placeholder="Отчество" required>
      </div>

    </div>
  </div>


  <div class="contact-info">
    <div class="form__title">
      Контактная информация
    </div>


    <div class="form__inner form__inner--contact">
      <div class="contact__form-input">

        <label class="contact__form-label" title="Ваш мобильный номер телефона" for="tel">Телефон*:</label>
        <input type="tel" class="form-input form-input__contact form-input__contact--tel" required name="input-tel" id="tel" placeholder="Введите телефон">

        <div class="form-input__contact-icon form-input__contact-icon--tel">
          <img src="img/phone.svg" width="18" height="18" class="input__icon" alt="">
        </div>
      </div>
      <div class="contact__form-input">
        <label class="contact__form-label" for="email" title="Ваша электронная почта (e-mail)">Электронная почта*:</label>
        <input type="email" class="form-input form-input__contact form-input__contact--email" required name="input-tel" id="tel" placeholder="Введите e-mail">
        <div class="form-input__contact-icon">
          <img src="img/mail.svg" width="18" height="18" class="input__icon" alt="">
        </div>
      </div>
    </div>

  </div>

  <div class="sight">
    <div class="form__title form__title--sight">
      Посещенные <br> достопримечательности
    </div>


    <div class="form__inner form__inner--sight">

      <div class="sight__form-input">
        <input type="checkbox" class="form-input__checkbox" name="bright-devil" id="devil" checked>
        <label for="devil" class="sight__label">Мост Дьявола</label>
      </div>
      <div class="sight__form-input">
        <input type="checkbox" class="form-input__checkbox" name="mountain" id="mountain">
        <label for="mountain" class="sight__label">Гора-Колокол</label>
      </div>
      <div class="sight__form-input">
        <input type="checkbox" class="form-input__checkbox" name="slide-park" id="slide-park">
        <label for="slide-park" class="sight__label">Слайд-парк</label>
      </div>
      <div class="sight__form-input">
        <input type="checkbox" class="form-input__checkbox" name="red-rock" id="rock">
        <label for="rock" class="sight__label">Красные скалы</label>
      </div>

    </div>
  </div>

  <div class="emotion">
    <div class="form__title form__title--emotion">
      опишите свои эмоции
    </div>


    <textarea class="emotion__form-textarea" name="emotion-text" id="emotion-text" placeholder="Опишите подробно все свои восторги" required>
                                </textarea>

</form>


Ответы (0 шт):