Javascript 如果为空则不起作用？

Question

因此，如果表单为空，我尝试更改提交按钮的颜色。所以我不太确定我做错了什么，因为我是 super 新人，但这是我目前拥有的代码。

我的部分表格

 <div class="field">
<input type="email" placeholder="Email">
</div>
<div class="submit">
<input type="submit" value="Reset Password">
</div>

还有 JS

if ($('#field'.is(':empty')){
     $("#submit").css({"backgroundColor":"black"});
 }

有什么想法吗？

Answer 1

你在 jQuery 中指定了 id，而它应该是类 -

if ($('.field'.is(':empty'))){ // field is a class, not an id, extra parentheses needed
     $("#submit").css({"backgroundColor":"black"});
 }

但是，您应该做的是检查电子邮件字段的值，因为输入使该字段“不为空”，这意味着上面的永远不会工作

您需要做的是检查输入的值是否有长度，输入的容器不相关:

if(!$('input[name="email"]').val().length) {
    $('#submit').css({"backgroundColor":"black"});
}

编辑:OP使他的愿望更清楚后最终确定的代码(验证电子邮件) -

$('input[name="email"]').change(function () {
    // regex to validate e-mail address
    var regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    var validEmail = regex.test( $(this).val() );
    if(true == validEmail) {
        $('#submit').css({
            "background": "#CCCCCC",
            "color": "black"
        });
    }
});