Input pattern doesn't match completely in IE11, but in Chrome, FF

Question

The following input field validates completely in Chrome and FF, but only partially in IE11.

<input name="bic" value="" type="text" title="BIC-Code" required
 pattern="[A-Z]{6}[A-Z2-9][A-NP-Z0-2](|[A-WY-Z0-9][A-Z0-9]{2}|X{3})"
>

Testing the code with a BIC with 8 characters always works in any browser. Testing it with 11 characters produces an error in IE.

Currently installed version: 11.0.9600.17959, updateversion: 11.0.22

Examples:

• 6 chars are valid in all Browsers: RBOSGGSX
• 11 chars are valid in all Browsers except IE: GENODEF1S04

Questions:

• Is there a bug in IE (probably)?
• Are there known limitations in the use of regex in IE?
• Do I make an error which Chrome and FF ignores?

The only thing Google finds is the type='number' "problem" with ^[0-9]*$.

http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#the-pattern-attribute says:

This implies that the regular expression language used for this attribute is the same as that used in JavaScript, except that the pattern attribute must match the entire value, not just any subset (somewhat as if it implied a ^(?: at the start of the pattern and a )$ at the end).

Even the Javascript-Engine validates correctly in IE11:

new RegExp("^[A-Z]{6}[A-Z2-9][A-NP-Z0-2](|[A-WY-Z0-9][A-Z0-9]{2}|X{3})$").test("GENODEF1S04");

Answer 1

It seems IE11 can't handle alternation where the first branch is empty. This:

(|[A-WY-Z0-9][A-Z0-9]{2}|X{3})

...should be equivalent to this:

((?:[A-WY-Z0-9][A-Z0-9]{2}|X{3})??)

...meaning [A-WY-Z0-9][A-Z0-9]{2} or X{3} or nothing, with "nothing" being the first (or preferred) option.

I recommend against using the "or nothing" idiom, even with the empty branch at the end (which seems to work okay in IE11). It's not very common, and I think an optional group does a better job of communicating your intent.