Properly simulate "pattern" attribute with javascript

Question

I'm trying to replicate the html5 pattern attribute with javascript but getting inconsistent results.

The pattern is [a-zA-Z\. \']+

In Chrome, typing "asd 123" does not pass the test.

Using something like

el.value.match(new RegExp(el.pattern))

lets "asd 123" through, obviously because "asd " is a match.

I can solve this particular problem by adding ^ and $ to beginning and end of my pattern, but the question is this - is there some function out there that is implemented exactly as the pattern attribute? Are there other surprises I should expect?

@fardjad - Generally that's true, but the characters ^-\] still need to be escaped in a character class. Sorry to be pedantic, but I often see SO questions where a - isn't properly escaped or positioned. — Justin Morgan
– Justin Morgan, Commented Apr 4, 2013 at 14:30
@JustinMorgan Well, to be even more pedantic, you do not need to escape the dash (-) if it is the last character of a character class. — Anthony Rutledge
– Anthony Rutledge, Commented May 8, 2015 at 21:26

Bergi · Accepted Answer · 2013-04-03 20:00:53Z

Are there other surprises I should expect?

Yes. You can look up the pattern attribute in HTML5 spec:

If an input element has a pattern attribute specified, and the attribute's value, when compiled as a JavaScript regular expression with the global, ignoreCase, and multiline flags disabled (see ECMA262 Edition 5, sections 15.10.7.2 through 15.10.7.4), compiles successfully, then the resulting regular expression is the element's compiled pattern regular expression.

That's nice, as it means a JS regex will do exactly as a HTML one.

The compiled pattern regular expression, when matched against a string, must have its start anchored to the start of the string and its end anchored to the end of the string.

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

As you can see, just adding ^ and $ is not enough. If for example somebody entered a disjunction A|B, then ^A|B$ would not be correct - it needs to be ^(A|B)$.

Also you might notice that the pattern attribute does not apply to inputs that are set to multiple.

Is there some function out there that is implemented exactly as the pattern attribute?

You can check out https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#web-forms for some common polyfill libs/plugins, but I haven't tested any to be standards-compliant.

talemyn · Accepted Answer · 2013-04-03 19:55:43Z

3

Adding ^ and $ is more-or-less implementing it exactly as the pattern attribute. Per the most recent version of the w3c specs for pattern in HTML 5 (http://www.w3.org/html/wg/drafts/html/master/forms.html#the-pattern-attribute):

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

(emphasis added)

answered Apr 3, 2013 at 19:55

talemyn

8,0004 gold badges33 silver badges52 bronze badges

Comments

MikeM · Accepted Answer · 2013-04-04 09:28:52Z

2

The essence of such a function would likely be something similar to

function validate( el ) {
  // Check hasAttribute to avoid a regex like ^(?:null)$
  return el.value && el.hasAttribute( 'pattern' ) 
    ? new RegExp( '^(?:' + el.getAttribute( 'pattern' ) + ')$' ).test( el.value )
    : null
}

(IE 8+ because of hasAttribute)

Though a proper validation implementation would also have to consider other factors such as the presence of the required attribute. See Data form validation and HTML5 Form shims such as Making HTML5 Form backwards compatible for further detail.

edited Apr 4, 2013 at 9:28

answered Apr 3, 2013 at 20:05

MikeM

13.8k3 gold badges38 silver badges49 bronze badges

1 Comment

Bergi Over a year ago

why do you think anything would need to be double escaped? <input pattern="\d+"> is fine.

Collectives™ on Stack Overflow

Properly simulate "pattern" attribute with javascript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related