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

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

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

Update

It indeed was the global flag issue. Thanks to Pointy's ment 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");
  }
}

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.)}

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.)}

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.)}

Update

It indeed was the global flag issue. Thanks to Pointy's ment 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");
  }
}

• javascript
• jquery
• regex

• 4 I'm not sure what's going on, but I'd change that regex to /^\d{5}$/ and drop the "g" flag. Then you don't need to separately test the length. – Pointy Commented Jul 20, 2010 at 15:25
• Not that this is any different, but you might also want to try /^\d\d\d\d\d$/ explicitly listing the 5 numbers. Again, this shouldn't be the fix, but is worth a try nonetheless. – sberry Commented Jul 20, 2010 at 15:29

2 Answers 2

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

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

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.