How to dynamically test an input field for a correctly formatted E-Mail address before enabling the Submit button

Question

I've coded the the following jQuery code for an E-Mail signup form.

$(document).ready(function () {
  var default_value = '<?php echo $email_text ?>';
  var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  $('#email').each(function () {
    $(this).focus(function () {
      if (this.value == default_value) {
        this.value = '';
      }
    });
  $(this).blur(function () {
    if (this.value == '') {
      this.value = default_value;
    }
  });
});
$('button#yes').hover(function () {
  $(this).css('background', '#fff').css('cursor', 'not-allowed');
  $('#email').css('background', '#ca9822');
}, function () {
  $(this).css('background', '').css('cursor', '');
  $('#email').css('background', '');
});
$('#email').keyup(function () {
  if (this.value.length > 2 && this.value !== default_value && filter.test(this)) {
    $('button#yes').unbind().css('background', '').css('cursor', '').click(function () {
      showconfirm();
    });
    $('#email').css('background', '');
  } else {
    $('button#yes').unbind().hover(function () {
      $(this).css('background', '#fff').css('cursor', 'not-allowed');
        $('#email').css('background', '#ca9822');
      }, function () {
        $(this).css('background', '').css('cursor', '');
        $('#email').css('background', '');
      });
    }
  });
$("form#signupform").submit(function () {
. . .

What it basically does is check the input form, then enables the "Yes" button which then triggers the showconfirm() function, which brings up a real Submit button that finally handles the submit action and etc.

The thing is that I only need the "confirm" button for Terms & Privacy Policy issues. I would really like to do the entire checking process at the first button. I mean that the user should not be able to click "Yes" if the input E-Mail does not meet some criteria. I can get it to work up to the value.length > 2 (I've read in another SO article that the minimum length for an E-Mail can be 3 characters, i.e. "a@b"... this is where the > 2 comes from, if you're wondering) and up to the value !== default_value (the default value is basically "Your E-Mail" and it is cleared from the input field and redrawn in the input field as the user focuses and blurs on the input before entering any custom data). But when I put in the filter.test() I always get a false for that.

Surely I'm using it wrong here, though I can't figure out HOW. I was using it previously under the submit function and it was working great. But, as I said, I'm trying to make it all work on the first part of the process. Really, in the submit function, this ends up being a hassle of repetition of codes and such, adding an error message, etc., etc., etc. Which is why I want to switch it around.

Any ideas, please?

Answer 1

You are trying to test the pattern on the input element, not on its value. Try this:

$('#email').keyup(function () {
  if (this.value.length > 2 && this.value !== default_value && filter.test(this.value)) {

You tried filter.test(this) but you should use filter.test(this.value).