Geek Answers Handbook

Incorrect javascript regex test in Firefox and Chrome

I am encountering a strange problem with javascript regex in Firefox 3.6 and Chrome 6 dev. I am working on a huge form input website that has some basic JavaScript validation using jQuery.

$(document).ready(function() { $("tr[id^='" + BaseRowId + "rid']").each(function(){obj.WireRowEvents(this);}); } var obj = { "WireRowEvents": function(row) { $("input[id$='Orgn']").blur(function() { obj.ValidateOrgn(this); }).blur(); $("input[id$='Prog']").blur(function() { obj.ValidateProg(this); }).blur(); }, "ValidateOrgn": function(orgnId) { // ValiadateProg is the same as this var orgn = $(orgnId); // function except it checks for a if (orgn.length == 0) // length of 4 instead of 5. return; var orgnValue = orgn.val(); if (orgnValue.length != 5) { if (orgnValue.length > 0) { orgn.addClass("invalid"); } else { orgn.removeClass("invalid"); } } else { if (/\d{5}/g.test(orgnValue)) { // This is the problem area orgn.removeClass("invalid"); // The above line is '/\d{4}/g' for prog. } else { orgn.addClass("invalid"); } } } }

Using the javascript above (simplified only by the ready and WireRowEvents , but the ValidateOrgn method is not completely damaged. As you can see, the only requirements for Orgn to be valid must be 5 numbers long and Prog must be 4 numbers long. On the Internet Explorer 7 and 8, as well as Safari 4.0.4, the above code works as it should.

In Firefox and Chrome on the load, Orgn and Prog pages are marked as invalid, but only on the right side. The full line contains two Orgn inputs and two Prog (with different identifiers, but ending in Orgn and Prog). The left side looks as it should, but the right side is "invalid."

http://www.gibixonline.com/media/so/jquery-regex-initial.png

The best part is, you can click in the text box and click back, and sometimes (not 100%), it will be checked correctly.

http://www.gibixonline.com/media/so/jquery-regex-clicking.png

When passing through the ValidateOrgn and ValidateProg functions in Firebug, the if (/\d{5}/g.test(orgnValue)) line if (/\d{5}/g.test(orgnValue)) returns false, which is why it adds the css invalid class. If at this moment I copy the exact same line and paste it into the console true , as expected. Again, clicking and clicking will cause it to flip between valid and invalid states.

In Internet Explorer and Safari it works as expected, and I cannot reproduce the problem there.

http://www.gibixonline.com/media/so/jquery-regex-correct.png

Update

It really was a global flag issue. Thanks to Pointy's comment, I also managed to simplify the function call (it was marked together and was marked as cleared anyway). New method now:

 "ValidateOrgn": function (orgnId) { var orgn = $(orgnId); if (orgn.length == 0) return; // I don't want to mark it invalid if it blank. if (orgn.val().length > 0) { if (/^\d{5}$/.test(orgn.val())) { orgn.removeClass("invalid"); } else { orgn.addClass("invalid"); } } else { orgn.removeClass("invalid"); } }
+6
javascript jquery regex
source share
2 answers

Maybe try putting your regular expression in a separate variable, for example:

  //... var re = /^\d{5}$/; // using Pointy comment, which I think is well-advised if (re.test(orgnValue)) { // This is the problem area orgn.removeClass("invalid"); // The above line is '/\d{4}/g' for prog. } else { orgn.addClass("invalid"); } //...
+3
source share

This is a known issue with some browsers when using the regexp object called by the lastIndex . You can easily reproduce it:

 var r = /\d{5}/g; alert(r.test('12345')); //true alert(r.test('12346')); //false

In your case, the regex is cached, and you see the same effect. A simple solution is to reset regexp lastIndex : r.lastIndex = 0 or, as suggested, use a regular expression where this is not a problem.

+2
source share

More articles:


All Articles