как проверить, заполнен ли 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>