Форма Jquery отправляется, даже если проверка недействительна

Question

У меня есть форма, которую необходимо проверить перед отправкой с axios.

<form method="POST" action="{{ route('application.store') }}" id="myForm" novalidate="">
    <input name="name" type="text" class="form-control required" placeholder="Name" autocomplete="name" required>
    <div class="invalid-feedback">
       Please insert name
    </div>

    <input name="email" type="email" class="form-control required" placeholder="Email" autocomplete="email" required>
    <div class="invalid-feedback">
       Please enter email
    </div>

    etc. etc

    <button type="submit" class="btn">Send</button>
</form>

, тогда в моем javascript есть:

$('button[type="submit"]').click(function(e) {
    e.preventDefault();
    $("#myForm .required").each(function(e) {
        if ($.trim($(this).val()).length == 0) {
            $(this).addClass("is-invalid");
            $(this)
                .closest(".invalid-feedabck")
                .show();
        } else {
            $(this).removeClass("is-invalid");
            sendApplication();
        }
    });

    function sendApplication() {
       // here is the axios post method...
    }
});

Итак, когда один извходные данные пусты, отображается сообщение о недействительной обратной связи, но форма все равно отправляется, так что я делаю не так?