1

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?

Improve this question
4
  • 2
    ericleads.com/h5validate Commented Apr 3, 2013 at 19:37
  • FYI, You don't need to escape characters inside brackets Commented Apr 3, 2013 at 19:46
  • @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. 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. Commented May 8, 2015 at 21:26

3 Answers 3

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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)

Improve this answer

Comments

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.

Improve this answer

1 Comment

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.