Use keypress event. Try with this -

onkeypress="alert(/([A-Z0-9a-z_-][^@])+?@[^$#<>?]+?\.[\w]{2,4}/.test(this.value))"

I would prefer to use onblur in this case.

You can also use jquery -

HTML

<input id="email_address">
<span id="error" style="display:none;color:red;">Wrong email</span>

Jquery

$('#email_address').on('keypress', function() {
    var re = /([A-Z0-9a-z_-][^@])+?@[^$#<>?]+?\.[\w]{2,4}/.test(this.value);
    if(!re) {
        $('#error').show();
    } else {
        $('#error').hide();
    }
})

DEMO

Try /[^$#<>?]/ instead.

The ^ inside and at directly after the opening bracket makes the class negative.

You can learn more about this on regular-expressions.info

Or better, heres a workign simple regex that does it, using yours as a start.

http://jsfiddle.net/hG99U/1/

I like the idea of fade in/out based on valid/invalid input.

I played around a bit and following seem to be working for me ok: http://jsfiddle.net/yc9Pj/

function validateEmail(){

    var validEmail = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*('#user_email').keyup(function(){
    if (validEmail.test(this.value)) {
        $('.masked-check').fadeIn(300)
    }
    else {
        $('.masked-check').fadeOut(300);
        //alert('Please enter a valid email');                                
    }
    });    
}

validateEmail();​

please note, that I adapted regex for email based on this reply: Using a regular expression to validate an email address

Moreover keyup worked best for me, as keypress didn't handle backspace (solution found here: jQuery: keyPress Backspace won't fire?)

You code is bit incorrect, you can do this:

$('.newsletter-signup input').first().keyup(function () {
    var $email = this.value;
    validateEmail($email);
});

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

In your code:

$email = $('.newsletter-signup input').first();

you are only getting the jQuery object of the first input not the value. Hence the validation is not working at all.

So, in order to get the value of the input element you can use:

 var $email = this.value;

as this here refers to the $('.newsletter-signup input').first(). So need to again call it and after that get the value from it. You can directly do that using this.value.

• onKeyValidate is an okay name, but a better name could be validateKeypress.

• It seems very silly to store a RegExp as a string, and then construct it every time. Why not just declare var alpha = /[ A-Za-z]/?

• keyChars appears to check against \x00, the null character, and \x08, the backspace character. Neither of these can ever be passed to onKeypress, so you can just take it out.

• The standard way to get the character code is event.which || event.keyCode.

• event is a global; I don't think you need to pass it in.

Here's a proposed rewrite:

var alpha = /[ A-Za-z]/;
var numeric = /[0-9]/; 
var alphanumeric = /[ A-Za-z0-9]/;

function validateKeypress(validChars) {
    var keyChar = String.fromCharCode(event.which || event.keyCode);
    return validChars.test(keyChar) ? keyChar : false;
}

The HTML will have to change to onkeypress="validateKeypress(alpha);".

i dont know that problem but you can use jquery to validate the from by doing "$("FormSelector").valid()

so you can do

$("input[type='text'"]).keypress(function() {
  $(this).valid()
    //Or if you want to validate the whole form
  $(this).closest('form').valid()
});

Just add onkeyup : false to your jQuery.validation options, then it wont trigger validate when you input anything.

   $('#your_form_id').validate({
       onkeyup: false,
       rules : { 
           email : {email : true} 
       }
    });

First off you need to find the sibling of this input, so change your selector from $('input') to $(this).

Secondly, .check is not a sibling of the input. It's a descendant of the sibling.

$(this).siblings(".added").find('.check').css('visibility', 'visible');