當電子郵件有效時動態顯示提交按鈕

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); 
}