Regular expression validation - initialization error in Javascript

Question

I am trying to write a function in Javascript to validate email address. Here is the function.

function validateEmailAddress() {   
    var patternForEmail = /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})$/;
    var regexPatternForEmail = new RegExp(patternForEmail, 'i');

    // Email address and the Confirm Email address values should match
    if ($('#txtEmail').val() != $('#txtConfirmEmail').val()) {
        $('#dvErrorMsg').html("Email addresses do not match.");
        $('#txtEmail').focus();
        return false;
    }
    else if (!regexPatternForEmail.test($('#txtEmail').val())) {
        $('#dvErrorMsg').html("Please enter a valid email address.");
        $('#txtEmail').focus();
        return false;
    }
    else
        return true;
}

The problem here is I am getting an error, 'Syntax error in regular expression' during RegExp object instantiation.

I tried debuggin in IE 11 and that's where i found the error. Could someone please suggest me a solution for this.

Screen shot taken while debugging: enter image description here

Avinash Raj · Accepted Answer · 2015-04-17 07:50:43Z

2

You don't need to create another regex variable using RegExp constructor. Just use only the below.

var patternForEmail = /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})$/i;

i at the last called case-insensitive modifier which helps to do a case-insensitive match.

Example:

> var patternForEmail = /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})$/i;
> patternForEmail.test('[email protected]')
true
> patternForEmail.test('@[email protected]')
false

edited Apr 17, 2015 at 7:50

answered Apr 17, 2015 at 7:25

Avinash Raj

175k32 gold badges247 silver badges289 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dinny Over a year ago

I am fairly new to this. If you don't mind could you please tell me how ?

Avinash Raj Over a year ago

check for the match using the above regex variable.

Sebastian Simon Over a year ago

@Dinesh You used new RegExp(someRegExp,'i') but should have used new RegExp(someString,'i') if anything (or just omit that line, as suggested). Using the RegExp constructor with a string requires further formatting the above pattern but because it’s a RegExp already it’s not necessary. So just remove that new RegExp line.

Sebastian Simon Over a year ago

Also, the Firefox console gives me a different error: TypeError: can't supply flags when constructing one RegExp from another. You could actually remove that 'i' flag in the constructor. Note: if you remove the new line you have to append an i after the last / in the above line!

Dinny Over a year ago

@AvinashRaj - Thanks for the suggestion. I dont see any errors now and things are working like charm.

Mukesh Mohan · Accepted Answer · 2015-04-17 08:26:17Z

0

In most of the times this kinds of errors occurs because of browser compatibility , so always we need to use the codes which can be run in all the browsers. I hope the following changes will help you.

var patternForEmail = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;

then you can match the expression using

if (patternForEmail.test($('#txtEmail').val())) {
            $('#dvErrorMsg').html("Please enter a valid email address.");
            $('#txtEmail').focus();
            return false;
}

or else you can use match() function also which will be more flexible for all the browsers.

var email = $('#txtEmail').val();

if (!email.match(/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i)) {
        $('#dvErrorMsg').html("Please enter a valid email address.");
        $('#txtEmail').focus();
        return false;
}

edited Apr 17, 2015 at 8:26

answered Apr 17, 2015 at 8:21

Mukesh Mohan

666 bronze badges

2 Comments

user663031 Over a year ago

Why is match more flexible than test?

Mukesh Mohan Over a year ago

it is on the case of compatibility and accuracy. Truthfully test() is faster than match(), but in accuracy match() is good. Because if the repeated test statements are created for the same value test() may fail, but match() still give correct answer , Regexp keeps track of the lastIndex when a new match is found.

Collectives™ on Stack Overflow

Regular expression validation - initialization error in Javascript

2 Answers 2

5 Comments

2 Comments

Your Answer

Collectives™ on Stack Overflow

Regular expression validation - initialization error in Javascript

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest