Question

解决方案应该非常简单。我想在输入框中找不到任何值时阻止表单正确提交。这是我的JSFiddle：http://jsfiddle.net/nArYa/7/

//标记

<form action="" method="post" name="form" id="form">
<input type="text" placeholder="Your email*" name="email" id="email">
<input type="text" placeholder="Your name*" autocomplete=off name="name" id="user_name"
<button type="submit" id="signup" value="Sign me up!">Sign Up</button>
</form>

// jQuery的

if ($.trim($("#email, #user_name").val()) === "") {
    $('#form').submit(function(e) {
        e.preventDefault();
        alert('you did not fill out one of the fields');
    })
}

正如您在JSFiddle中看到的那样，问题是当我在两个字段中输入内容时，会弹出警告框STILL。我很难搞清楚原因。我的内心有什么不对吗？ if（$ .trim（$“＃email，＃user_name）。val（））===”“）？

Answer 1

两件事，＃1每次提交尝试时都会检查空字段，＃2需要单独检查每个字段

$('#form').submit(function() {
    if ($.trim($("#email").val()) === "" || $.trim($("#user_name").val()) === "") {
        alert('you did not fill out one of the fields');
        return false;
    }
});

<强> Updated fiddle

Answer 2

您的检查是在页面加载时发生的。您需要在提交表单时检查字段。

$('#form').submit(function(e) {
    if ($.trim($("#email, #user_name").val()) === "") {
        e.preventDefault();
        alert('you did not fill out one of the fields');
    }
});

Answer 3

HTML5：在输入标记

中使用必需

布尔属性。
必须在提交表单之前填写输入字段。
适用于文字，搜索，网址，电话，电子邮件，密码，日期选择器，号码，复选框，广播和文件。
```
<input required type='text'...>
```

w3schools hint

Answer 4

我想这会有所帮助：

$('#form').submit(function(e) {
    e.preventDefault();
    $("#email, #user_name").each(function(){
        if($.trim(this.value) == ""){
            alert('you did not fill out one of the fields');
        } else {
            // Submit 
        }
    })
})

Answer 5

将if语句放在回调中：

$('#form').submit(function(e) {
    if ($.trim($("#email").val()) === "" || $.trim($("#user_name").val())) {
        e.preventDefault();
        alert('you did not fill out one of the fields');
        //You can return false here as well
    }
});

当输入字段为空时，使用jQuery来阻止表单提交

5 个答案: