Javascript JQuery alert popup not showing up

Question

I tried to make alert pop-up with JQuery and I want that pop-up to show when the user clicks on submit but the form is not filled it. If I test my code and leave my form empty and click on 'submit' the page is just refreshing and there's no alert message showing up

This is my form in 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>

This is my function in JQuery/Javascript:

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

Does anyone know what I'm doing wrong? Is there another way to check if the form is empty? Any kind of help is appreciated

Answer 1

cannot find the error

https://jsfiddle.net/zbty4kwd/

Edit: with empty date input (same way) 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 2

Loop through all the input fields present in form:

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

Answer 3

You need to listen submit event of the form. Click event listener can not prevent submit action, so return false; from click listener does not have any effect here. Try something like this:

$('#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 4

$('#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;
 }