Как сменить стиль после нажатия субмит, проверив, что input заполнены?

Question

[Антон]

Есть форма, два inputа и субмит.
Сделал, если субмит кликаем, то отправляется ajax post запрос (без перезагрузки)
и меняем стиль у блока.
Проблема в том, что стиль надо менять, только если input заполнены, а то нелогично получается.

Как сменить стиль у #popmechanic-post-text на display: block !important; после нажатия субмит, проверив, что input заполнены?

<form name="sender_api" id="sender_api" action="/api/sender_post.php" method="POST" enctype="multipart/form-data">
<input required placeholder="Ваше имя">
<input  type="email" required placeholder="Ваш email">
<input id="popmechanic-submit" type="submit" name="submit"value="Подписаться">
.....

<style>
.some_1{display: block !important;}
</style>

$('#popmechanic-submit').click(function(){
$('#popmechanic-post-text').addClass('some_1');
  });

<script>
$(function() {
    $("#sender_api").submit(function(e) {
        e.preventDefault();
        var t = $(this).serialize();
        $.ajax({
            url: "/api/sender_post.php",
            type: "post",
            data: t,
            success: function(e) {
                $("#result_sender").html(e)
            }
        })
    })
})
</script>

Comments

[Дмитрий]

Вопрос уже заключает в себе ответ. В функции submit проверить что Input заполнены и сменить стиль.

[Антон]

Дмитрий, да, но как?
Проверить, что заполнены и нажат субмит (сначала нажимаем, потом меняем).
Как проверяется заполненность полей?

[Дмитрий]

Антон, У вас есть событие субмит, для него в коде определена функция, в любом месте этой функции вы можете вставить код, проверяющий заполненность инпутов формы(форма доступна по через переменную this внутри события) и меняющий стили.

[Дмитрий]

Проверка заполненности например

const filled = this.querySelectorAll('input[required]').every(input => input.value != false);

[Антон]

Дмитрий, попробую это под себя переделать
https://codepen.io/Profiteer/pen/bBgJyZ

[dimkaholodov]

$(function() {
    $("#sender_api").submit(function(e) {
        e.preventDefault();
        var t = $(this).serialize();
$('#popmechanic-post-text').addClass('some_1');
        $.ajax({
            url: "/api/sender_post.php",
            type: "post",
            data: t,
            success: function(e) {
                $("#result_sender").html(e)
            }
        })
    })
})

[Антон]

dimkaholodov, огромное спасибо

Answer 1

[Yusif Zourab]

Несколько примеров.

Если переменная объявлена локально:
if(some !== undefined)

Если переменная объявлена глобально:
if(window.some !== undefined)

Еще как вариант проверки наличия переменной:
if(typeof(some) == 'undefined' || some === null)

Answer 2

[Александр Косицын]

у строки есть lenth. если и у того и другого испута есть lenth то меняй класс