CODEWITHSUNDEEP
javascriptjqueryregex
Joshua
Joshua

Reputation: 8212

Unreliable javascript regex test in Firefox and Chrome

I am encountering a strange javascript regex problem on Firefox 3.6 and Chrome 6 dev. I am working on a massive form entry 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 above javascript (simplified just the ready and WireRowEvents functions, but the ValidateOrgn method is fully intact. As you can see the only requirements for the Orgn to be valid is to be 5 numbers long, and Prog is to be 4 numbers long. In Internet Explorer 7 and 8 as well as Safari 4.0.4 the above code works as it should.

In Firefox and Chrome, on page load the Orgn and Prog are flagged as invalid but only on the right side. The full row has two Orgn and two Prog inputs (with differing ids but ending in Orgn and Prog). The left side appears as it should but the right side is "invalid".


(source: gibixonline.com)

The best part is, you can click in a text box and click back out and sometimes (not 100%) it will validate properly.


(source: gibixonline.com)

When stepping through the ValidateOrgn and ValidateProg functions in Firebug the line if (/\d{5}/g.test(orgnValue)) returns false which causes it to add the css class invalid. If, at that point, I copy that same exact line and paste it into the console true is returned as expected. Again, clicking in and clicking out will cause it to flip back and forth between valid and invalid states.

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


(source: gibixonline.com)

Update

It indeed was the global flag issue. Thanks to Pointy's comment I've also managed to simplify the function call as well (it was hodpodged together and was flagged to be cleaned anyway). The new method is now:

"ValidateOrgn": function (orgnId) {
  var orgn = $(orgnId);
  if (orgn.length == 0)
  return;

  // I don't want to mark it invalid if it's blank.
  if (orgn.val().length > 0) {
    if (/^\d{5}$/.test(orgn.val())) {
      orgn.removeClass("invalid");
    } else {
      orgn.addClass("invalid");
    }
  } else {
    orgn.removeClass("invalid");
  }
}

Upvotes: 6

Views: 2993

Answers (2)

Kobi
Kobi

Reputation: 138007

This is a known problem with some browsers when using a regexp object, cause by the lastIndex property. You can easily reproduce it by:

var r = /\d{5}/g;

alert(r.test('12345')); //true
alert(r.test('12346')); //false

On you case, the regex is cached and you see the same effect. A simple solution is to reset the regexp lastIndex: r.lastIndex = 0, or, as suggested, to use a regex where this isn't an issue.

Upvotes: 3

Robusto
Robusto

Reputation: 31883

Maybe try putting your regex in a separate variable, like so:

  //...
  var re = /^\d{5}$/; // using Pointy's 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");
  }
  //...

Upvotes: 3

Related Questions