Question

我尝试使用JQuery弹出警报弹出窗口，并且希望当用户单击“提交”但表单未填写时显示该弹出窗口。如果我测试我的代码并将表单留空，然后单击“提交”，则页面将刷新，并且没有警告消息出现

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

找不到错误

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 2

浏览所有以下列形式显示的输入字段：

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

Answer 3

您需要监听表单的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 4

        <TouchableOpacity onPress={!this.props.program.wishedFor ? this.onSelectWish : this.onDeselectWish}>
          <FontAwesome
            style={{ padding: 7 }}
            name={this.props.program.wishedFor === false ? "heart-o" : "heart"}
            size={28}
            color={!this.props.program.wishedFor ? "#c5d1e8" : "#ff1d25"}
          />
        </TouchableOpacity>

Javascript JQuery警报弹出窗口未显示

4 个答案: