Показать отправить кнопку динамически, когда электронная почта действительна

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. вы не действительно проверить ввод (благодаря Eli)
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

Помогите с тем, что говорит дистор, есть синтаксическая ошибка. Но кроме того, вы не устанавливаете свою переменную email при вызове validateEmail. Я также сделал ядро ​​более конкретным, по словам Стива. Вот обновленный код.

$('#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); 
}