javascript - JQuery 弹出窗口未显示

Question

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

这是我的表单代码：

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>

这是我的 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>

在我脑海中：

那么我做错了什么？为什么当我点击提交按钮并且表格没有填写时没有显示警报？

任何形式的帮助表示赞赏

标签： javascriptjqueryforms

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>