jQuery弹出窗口未显示

Question

我正在尝试在未填写表单的情况下使用JQuery和Javascript弹出窗口，我希望弹出窗口显示出来。但是，当我不填写表单并单击“提交”按钮时，它不起作用，并且没有警报显示。

这是我的表单代码：

在zodat wij voor u kunnen matchen中的vul deze gegevens

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