Question

I’m sure this should be easy, but I can’t get it working.

html

<label for="email">Enter email for updates:</label>
<input type="text" name="email" id="email" placeholder="[e-mail]" />
<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 );
  }

});

I’m not looking for it to be the best email validation, rather just a simple way to show users when form looks right.

Any help gratefully received.

Answer 1

5 problems :

1. a syntax error (you should have a look at your console when something doesn’t work)
2. you don’t make the button disappear when the input isn’t valid anymore
3. you don’t really test the input (thanks Eli)
4. you don’t check the “email” isn’t empty
5. some valid email are refused by your regex (try "valid email"@example.com)

My proposal for the first four problems :

  $('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

For the last problem, I’d suggest you to read Stop Validating Email Addresses With Your Complex Regex.