JQuery 弹出窗口未显示

Question

I'm trying to make a popup with JQuery and Javascript when a form is not filled in I want the popup to show up. But when I don't fill in the form and I click on the submit button its not working and there is no alert showing up.

This is my form code:

Vul deze gegevens in zodat wij voor u kunnen matchen

<form action="" id="form">

    <label for="locatie"><strong>Naar welke locatie gaat u op vakantie?*</strong></label><br>
    <br>
    <input class="form-input" type="text" id="locatie" name="locatie"required/>

    <br><br>
    <label for="datum"><strong>Welk datum?*</strong></label><br>
    <br>
    <input class="form-input" type="date" id="datum" name="datum" value="19/04-2018"required/>
    <br><br>
    <input class="form-input" id="submit" name="submit" type="submit" value="Versturen">
</form>

This is my Javascript/JQuery code:

 <script language="javascript" type="text/javascript">
    $('#submit').on('click',function()
    {
        if( $('input:required').val().length === 0 ) {
            alert('Vul alle velden in voordat u probeert te verzenden');
            return false;

        }

    });

</script>

In my head:

So what am I doing wrong? why is there no alert showing when I click on the submit button and the form is not filled in?

Any kind of help is appreciated

Answer 1

You are using css selectors wrong in your code

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <h3>Vul deze gegevens in zodat wij voor u kunnen matchen</h3> <form action="" id="form"> <label for="locatie"><strong>Naar welke locatie gaat u op vakantie?*</strong></label><br> <br> <input class="form-input" type="text" id="locatie" name="locatie" value=""/> <br><br> <label for="datum"><strong>Welk datum?*</strong></label><br> <br> <input class="form-input" type="date" id="datum" name="datum" value="19/04-2018"required/> <br><br> <input class="form-input" id="submit" name="submit" type="submit" value="Versturen"> </form>