javascript - 使用 jQuery 防止输入字段为空时提交表单

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 中看到的那样，问题是当我在两个字段中键入内容时，警告框仍然会弹出。我很难弄清楚为什么。我的 body 有问题吗 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