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

Question

Я пытаюсь создать всплывающее окно с JQuery и Javascript, когда форма не заполнена. Я хочу, чтобы всплывающее окно отображалось.Но когда я не заполняю форму и нажимаю на кнопку отправки, она не работает, и оповещение не появляется.

Это код моей формы:

Vuldeze 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>

Это мой код Javascript / JQuery:

 <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>

В моей голове:

Так чтоя делаю не так?почему при нажатии кнопки «Отправить» не отображается предупреждение, а форма не заполняется?

Любая помощь приветствуется

Answer 1

Вы неправильно используете селекторы CSS в своем коде

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