Не могу остановить отправку события в Javascript

Question

Я использовал это для проверки своей формы, но я могу остановить событие отправки на моей странице. Он по-прежнему отправляет данные и отправляет это. Почему? Как я могу это остановить?

    $(document).on("submit", "form", function(e) {
        if ($('#input-name').val() === '' && $('#input-phone-number').val() === '' && $('#input-address').val() === '' && $('#input-email').val() === '') {
            e.preventDefault();
            $('.noti-container').css({
                'opacity': '1',
                'z-index': '9999',
                'top': '20px',
                'background': '#FFCCCC'
            });
            $('.icon-container').html('<i class="fa fa-close"></i>');
            $('.notif').text('Please fill all field!');
            $('.notif').css({'color': 'black'});
            $('.icon-container').css({
                'background': '#F2F5A9'
            });
            setTimeout(function () {
                $('.noti-container').css({
                    'opacity': '0',
                    'z-index': '-1',
                    'top': '0',
                })
            }, 1500);
            return false;
        } else {
            return true;
        }
    });

Answer 1

e.preventDefault();, кажется, присутствует в блоке if. Если , если условие принимает значение false, форма будет отправлена. Вам нужно переместить код e.preventDefault(); перед блокировкой if, чтобы предотвратить передачу во всех случаях.

Пример:

$(document).on("submit", "form", function(e) {
  e.preventDefault();
  // Remaining Code
}

Answer 2

Добавлены некоторые изменения, попробуйте это

$(document).on("submit", "form", function(e) {

    e.preventDefault();

    alert('submit event stop');


    if ($('#input-name').val() === '' && $('#input-phone-number').val() === '' && $('#input-address').val() === '' && $('#input-email').val() === '') {

        $('.noti-container').css({
            'opacity': '1',
            'z-index': '9999',
            'top': '20px',
            'background': '#FFCCCC'
        });
        $('.icon-container').html('<i class="fa fa-close"></i>');
        $('.notif').text('Please fill all field!');
        $('.notif').css({'color': 'black'});
        $('.icon-container').css({
            'background': '#F2F5A9'
        });
        setTimeout(function () {
            $('.noti-container').css({
                'opacity': '0',
                'z-index': '-1',
                'top': '0',
            })
        }, 1500);
        return false;
    } else {
        return true;
    }
});