21

解决方案应该非常简单。当输入框中未找到任何值时，我试图阻止表单正确提交。这是我的 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 中看到的那样，问题是当我在两个字段中输入内容时，仍然会弹出警告框。我很难弄清楚为什么。我的 if($.trim($"#email, #user_name").val()) === "")有什么问题吗？

4

5 回答 5

36

两件事，#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;
    }
});

更新的小提琴

于 2013-07-25T17:52:14.970 回答
6

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

$('#form').submit(function(e) {
    if ($.trim($("#email, #user_name").val()) === "") {
        e.preventDefault();
        alert('you did not fill out one of the fields');
    }
});
于 2013-07-25T17:49:04.847 回答
5

HTML5：在输入标签中 使用required

  • 一个布尔属性。

  • 在提交表格之前必须填写输入字段。

  • 适用于文本、搜索、url、电话、电子邮件、密码、日期选择器、数字、复选框、收音机和文件。

    <input required type='text'...>

w3schools 提示

于 2016-09-21T07:05:33.643 回答
3

我想这会有所帮助：

$('#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 
        }
    })
})
于 2013-07-25T18:12:21.117 回答
1

将您的 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
    }
});
于 2013-07-25T17:49:47.497 回答