Javascript JQuery 未显示警报弹出窗口

Question

我尝试使用 JQuery 制作警报弹出窗口，我希望该弹出窗口在用户单击提交但未填写表单时显示。如果我测试我的代码并将表单留空并单击 'submit' 页面只是刷新并且没有显示任何警告消息

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

这是我在JQuery/Javascript中的功能：

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

有谁知道我做错了什么？还有另一种方法来检查表单是否为空吗？感谢任何形式的帮助

Answer 1

遍历表单中存在的所有输入字段：

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

Answer 2

您需要监听表单的 submit 事件。点击事件监听器不能阻止submit动作，所以return false;来自点击监听器在这里没有任何作用。尝试这样的事情：

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

找不到错误

https://jsfiddle.net/zbty4kwd/

编辑：空日期输入（同样的方式）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 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;
 }

Javascript JQuery 未显示警报弹出窗口

Javascript JQuery alert popup not showing up

html

javascript

forms

jquery

alert