Javascript JQuery предупреждение всплывающее окно не отображается

Question

Я пытался сделать оповещение всплывающим с помощью JQuery, и я хочу, чтобы это всплывающее окно показывало, когда пользователь нажимает на кнопку отправки, но форма не заполняется.Если я проверяю свой код и оставляю свою форму пустой и нажимаю «отправить», страница просто обновляется, и на ней не появляется предупреждающее сообщение

Это моя форма в HTML:

<h3>Vul deze gegevens in zodat wij voor u kunnen matchen</h3>

<form action="" id="form">
    <label for="datum"><strong>Welke locatie?*</strong></label><br>
    <br>
    <input list="brow" class="form-input" id="locatie">
    <datalist id="brow">
        <option value="Barcelona">
        <option value="Japan">
        <option value="Noordpool">
        <option value="Noord-korea">
        <option value="Rome ">
    </datalist>
    <br><br>
    <label for="datum"><strong>Welke datum?*</strong></label><br>
    <br>
    <input class="form-input" type="date" id="datum" name="datum" value="19/04-2018">
    <br><br>
    <input class="form-input" id="submit" name="submit" type="submit" value="Versturen">
</form>

Это моя функция в JQuery / Javascript:

$('#submit').on('click',function(){
    if ( $(".form-input").val().length === 0 ) {
        alert('Vul alle velden in voordat u probeert te verzenden');
        return false;
    }
});

Кто-нибудь знает, что я делаю неправильно?Есть ли другой способ проверить, если форма пуста?Любая помощь приветствуется

Answer 1

$('#submit').on('click',function()
 {       
   var allfields=$(".form-input");
    var isFormValid=true;
    for(var i=0;i<allfields.length;i++)
    {
       if(allfields[i].value != undefined)
       {
         if(allfields[i].value.length===0)
         {
           alert('Vul alle velden in voordat u probeert te verzenden');
           isFormValid=false;
           break;
         }
       }
    }
    return isFormValid;
 }

Answer 2

Вам необходимо прослушать submit событие формы.Слушатель событий клика не может предотвратить действие submit, поэтому return false; от слушателя кликов здесь не имеет никакого эффекта.Попробуйте что-то вроде этого:

$('#form').on('submit',function(event)
    {
        let err = false;
        $(".form-input").each(function () {
            if ($(this).val().length == 0) {
                alert('Vul alle velden in voordat u probeert te verzenden');
                err = true;
                return false;
            }
        });
        if(err){
            event.preventDefault();
        }
    });

Answer 3

не может найти ошибку

https://jsfiddle.net/zbty4kwd/

Редактировать: с пустым вводом даты (аналогично) https://jsfiddle.net/zbty4kwd/1/

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")
})

 $('#submit').on('click',function()
        {
            if ( $(".form-input").val().length === 0 ) {
                alert('Vul alle velden in voordat u probeert te verzenden');
                return false;
            }

        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form action="" id="form">
    <label for="datum"><strong>Welke locatie?*</strong></label><br>
    <br>
    <input list="brow" class="form-input" id="locatie">
    <datalist id="brow">
        <option value="Barcelona">
        <option value="Japan">
        <option value="Noordpool">
        <option value="Noord-korea">
        <option value="Rome ">
    </datalist>
    <br><br>
    <label for="datum"><strong>Welke datum?*</strong></label><br>
    <br>
    <input class="form-input" type="date" id="datum" name="datum" value="19/04-2018">
    <br><br>
    <input class="form-input" id="submit" name="submit" type="submit" value="Versturen">
</form>

Answer 4

Перебрать все поля ввода, представленные в форме:

$('#submit').on('click',function()
{
    $('#form input').each(function() {
        if ($(this).val() === '') {
            alert('Vul alle velden in voordat u probeert te verzenden');
            return false;
        }
    });
});