How to add another statement on keypress on email validation with jQuery

Question

Validations is working fine, if valid email is entered, displays a hidden box if not valid is showing a message error on a overlay, but how to check if keydown or return? any ideas guys?

This is my code, which can also be accessed in a jsFiddle:

function validateEmail() {
    var validEmail = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    $('#user_email').blur(function(){
        if (validEmail.test(this.value)) {
            $('.masked-check').fadeIn(300)
        }
        else {
            $('.masked-check').fadeOut(300);
            $('.overlay').append('<div class="alert alert-error" id="errors"></div>');
            showOverlay($('#errors').html('Please enter a valid email...'));

        }
    }); 
}

validateEmail();

I not sure if this is the way to do it but works for me now, the only issue is not listening to a keypress keyup or keydown. Here is the updated http://jsfiddle.net/creativestudio/bKT9W/3/ I am not sure is this is the best way to do it but works for now.

    function validateEmail() {
        var validEmail = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        $('#user_email').blur(function(){

        $('.masked-check').hide();

            if (validEmail.test(this.value)) {
                $('.masked-check').fadeIn(300)
            }
            else {
                $('.masked-check').fadeOut(300);
                $('.overlay').append('<div class="alert alert-error" id="errors"></div>');
                showOverlay($('#errors').html('Please enter a valid email...'));
            }

            if ($('#user_email').val()=='') {
                $('.masked-check').hide()
            }

        }); 
    }

    validateEmail();

You probably won't want to do it on `keydown`... For example, if I'm typing an email address: `myemail@email.com`, I would get the overlay for every character I press until the email is valid - which is about 16 times in the above example. — ahren, Nov 08 '12 at 20:55

score 2 · Answer 1 · edited May 23 '17 at 12:27

2

I believe what you're trying to achieve is for the email validation to run after each key-stroke and to keep notifying the user if their email was valid or not until it is valid.

There is a jQuery .keypress() event to identify a keypress event.

I got this working here: http://jsfiddle.net/bKT9W/2/

EDIT: I believe Peter's answer below is much better: https://stackoverflow.com/a/13298005/1415352

He suggests a better regex and also the .keyup() event which solves the backspace issue which arises when using .keypress()

edited May 23 '17 at 12:27

Community

1
1

answered Nov 08 '12 at 21:07

keithxm23

1,280
1
21
41

1

hey, thanks for reference, honestly I would not expect that :) – Peter Butkovic Nov 08 '12 at 21:39
1

Yeah, well my answer 'answered his question' but yours 'solved the problem'. :) – keithxm23 Nov 08 '12 at 21:45

score 2 · Answer 2 · edited May 23 '17 at 12:27

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?)

score 0 · Answer 3 · answered Nov 09 '12 at 08:29

Change your function "validateEmail" to the following:

function validateEmail(){

    var validEmail = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    $('#user_email').keydown(function(event){
        if (event.keyCode !== 13) {
            return;
        }
        if (validEmail.test(this.value)) {
            $('.masked-check').fadeIn(300)
        }
        else {
            //$('.masked-check').fadeOut(300);
            alert('Please enter a valid email');                                
        }
    });    
}

How to add another statement on keypress on email validation with jQuery

3 Answers3