当电子邮件有效时动态显示提交按钮

Question

我确信这应该很容易，但我无法正常工作。

HTML

<label for="email">Enter email for updates:</label> 
<input type="text" name="email" id="email" placeholder="your@email.com" /> 
<button name="submit" type="submit">Submit</button> 

JS

$(document).ready(function() { 

    $('button').hide(); 

    $('input').keyup(function() { 
    if(!validateEmail(email)){ 
     $('button').show(); 
    } 
    }; 

    function validateEmail(email) { 
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
    return emailReg.test(email); 
    } 

}); 

我不希望它成为最好的电子邮件验证，而只是一个简单的方式向用户展示的形式时，向右看。

感激地收到任何帮助。

Answer 1

5问题：

1. 语法错误（你应该在你的console看看当事情不工作）
2. 你不把按钮消失，当输入无效再
3. 你真的不测试输入（感谢礼）
4. 你不选中“电子邮件”不为空
5. 一些有效的电子邮件是由你的正则表达式拒绝（试行"valid email"@example.com）

我的前四个问题的建议：

$('button').hide(); 
    $('input').keyup(function() { 
    if(validateEmail($(this).val())){ 
     $('button').show(); 
    } else { 
     $('button').hide(); 
    } 
    }); 

    function validateEmail(email) { 
    if (!email) return false; 
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
    return emailReg.test(email); 
    } 

Demonstration

对于最后一个问题，我建议你阅读Stop Validating Email Addresses With Your Complex Regex。

Answer 2

协助什么dystroy说，有一个语法错误。但是，另外，拨打validateEmail时，您不会设置变量email。根据史蒂夫的评论，我还让核心更具体。这是更新的代码。

$('#email').keyup(function() { 
    var email = $(this).val(); 

    if(validateEmail(email)){ 
     $('button[type="submit"]').show(); 
    } 
    else { 
     $('button[type="submit"]').hide(); 
    } 

    }); 

Answer 3

感谢dystroy，礼Gassert & danronmoon。你们指出的大量不同的错误。为了将来的参考，这是来自你现在适用于我的不同修复程序的代码：

$('button').hide(); 

$('input').keyup(function() { 
    var email = $('#email').val(); 

    if(validateEmail(email)){ 
     $('button').show(); 
    } else { 
     $('button').hide(); 
    } 
}); 

function validateEmail(email) { 
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
    return emailReg.test(email); 
}