Regex Error in Chome using Javascript

Question

I have the following regex /^[a-zA-Z0-9-\_.]+@[a-zA-Z0-9-\_.]+\.[a-zA-Z0-9.]{2,5}$/ and when I test the regex in an online tester, it works just fine, but when I try and use it on Chrome, I get an error:

Pattern attribute value ^[a-zA-Z0-9-_.]+@[a-zA-Z0-9-_.]+.[a-zA-Z0-9.]{2,5}$ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /^[a-zA-Z0-9-_.]+@[a-zA-Z0-9-_.]+.[a-zA-Z0-9.]{2,5}$/: Invalid escape

UPDATE:

I also get the error in Firefox:

Unable to check because the pattern is not a valid regexp: invalid identity escape in regular expression

Here is the javascript code that is being used:

jQuery( "#contact_submit" ).submit(function( event ) {
    event.preventDefault();
    //Loader Image
   jQuery("#loader").show();
    var templateUrl = object_name.templateUrl;
    //Template Path
    jQuery("#loader").html("<img src="+templateUrl+"/aj-loader.gif alt='' width='35'>");


    var name = jQuery('#name_vc').val();
    var lname = jQuery('#name_lvc').val();
    var email = jQuery('#email_vc').val();
    var subject = jQuery('#subject_vc').val();
    var message = jQuery('#message_vc').val();    
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    var errormsg = "";

    if(name == ""){
        errormsg = "<p><font color='red'><h5 class = 'form_name_field'>Please Enter Name</h5></font></p>";
    }
    if(email == ""){
        errormsg += "<p><font color='red'><h5 class = 'form_name_field'>Please Enter Email</h5></font></p>";
    } else if (!filter.test(email)) {
        errormsg += "<p><font color='red'><h5 class = 'form_name_field'>Please Provide A Valid Email Address</h5></font></p>";
    }
    if(subject == ""){
        errormsg += "<p><font color='red'><h5 class = 'form_name_field'>Please Enter Subject</h5></font></p>";
    }
    if(message == ""){
        errormsg += "<p><font color='red'><h5 class = 'form_name_field'>Please Enter Message</h5></font></p>";
    } 

    if(errormsg != ""){
        jQuery("#loader").html(errormsg);
        return false;
    }

    jQuery.ajax({
        url: ajaxurl,
        data: {
            'action':'courses_ajax_request',
            'type':'display_contact',

            'name': jQuery('#name_vc').val(),
            'lname': jQuery('#name_lvc').val(),
            'email': jQuery('#email_vc').val(),
            'subject': jQuery('#subject_vc').val(),
            'message': jQuery('#message_vc').val(),
            'email_to': jQuery('#email_to').val()
        },
        success:function(data) {
            jQuery("#loader").html(data).delay( 5000 ).hide('slow');
            jQuery('#name_vc').val(""),
            jQuery('#name_lvc').val(""),
            jQuery('#email_vc').val(""),
            jQuery('#subject_vc').val(""),
            jQuery('#message_vc').val("")
        },
        error: function(errorThrown){
            console.log(errorThrown);
        }
    });


});

Can someone tell me what is going on and how I can fix it?

Can you share the Javascript code that is using the regex? It's most likely due to the way you are using it. — Nope, Dec 08 '16 at 17:07
The filter as you have declared it and how you are using it works in a fiddle just fine in chrome as well ► https://jsfiddle.net/y1124fye/ — Nope, Dec 08 '16 at 17:17
The regex is a little too strict for validating email addresses. Have you considered using it to prompt the user to check it is correct rather than completely reject the email address? — SpacedMonkey, Dec 08 '16 at 17:19
@FrançoisWahl that's the issue. It works sometimes, but not in the wordpress theme I have. I inherited this, and didn't write it myself. It isn't working, and when I check the log, I get the error that I posted. So there is something going on. I'm just not sure what. — BlackHatSamurai, Dec 08 '16 at 17:22
@SpacedMonkey I didn't write the original regex. It came in a WP theme, and I'm trying to fix it, so I'm all for something more verbose or less restrictive. — BlackHatSamurai, Dec 08 '16 at 17:25
@BlackHatSamurai I don't know wordpress myself but do they possibly overwrite some default JavaScript prototypes that could cause the issue? I guess you could start looking into querying them in the console. — Nope, Dec 09 '16 at 09:05

NSTuttle · Answer 1 · 2016-12-08T17:25:52.720

0

First off the RegEx you provided at the top:

/^[a-zA-Z0-9-\_.]+@[a-zA-Z0-9-\_.]+\.[a-zA-Z0-9.]{2,5}$/

Does not match the RegEx you provided in your code:

/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/

Give this RegEx a try, the one you provided gave me some troubles as well. Seems you are not escaping a character properly.

This one should handle just fine if need be:

^([\w\.\-_]+)?\w+@[\w-_]+(\.\w+){1,}$

If using this, include the multiline: "m" expression flag.

You might also want to ignore case: "i" as well as use global search: "g" for iterative purposes.

edited Dec 08 '16 at 17:25

answered Dec 08 '16 at 17:14

NSTuttle

3,237
2
17
26

Thank you for pointing out the difference in the code. I didn't even see that. It would appear that there is another issue, and it's not the regex. Thanks for your response. – BlackHatSamurai Dec 08 '16 at 17:55

ghusse · Answer 2 · 2016-12-09T10:42:20.223

-1

You have an extra \ before the @ in your JS code.

var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

The Regex in your JS is not the same as the one you initially pasted in your question.

If you don't need to capture substrings, using non-capturing groups will make it a little more efficient.

You also can use the i flag to match upper & lowercase characters.

var filter = /^[a-z0-9_\.\-]+@(?:[a-z0-9\-]+\.)+[a-z0-9]{2,4}$/i;

Please consider having a less strict regex for validating emails, because it will fail on valid adresses such as

foo+bar@gmail.com
jdoe@banana.business

You can refer to this question for a list of interesting answers about validating email addresses. But I would recommend using something simple such as /\S+@\S\+.\S+/.

edited Dec 09 '16 at 10:42

answered Dec 08 '16 at 17:18

ghusse

3,200
2
22
30

I don't know why someone downvoted this answer, a comment would have been helpful – ghusse Dec 09 '16 at 10:19
I also updated this answer to explain the thing about the extra `\`, add a fixed regex and a link to more detailed answers. – ghusse Dec 09 '16 at 10:26

Regex Error in Chome using Javascript

2 Answers2