How do input elements check if strings match the regular expression specified in the pattern attribute?
I am creating an npm module which will be a collection of regular expression validation patterns from http://html5pattern.com/ and other sources.
My question came about when I tried testing some of the expressions. I am using Ava.js to do simple assertions.
Internally, when testing regular expressions, Ava uses the RegEx test() method. So, for example, /[a-zA-Z0-9]+/.test("Us3rN@m3") would return true.
However, when you actually use /[a-zA-Z0-9]+/ as the regular expression for an input element's pattern attribute, "Us3rN@m3" returns false.
So I am guessing that internally, the input element is doing a different test?
The HTML spec states that the given regular expression is compiled as a JavaScript regular expression with only the "u" flag specified, which does not tell me much.
If I write the regular expression like this /^[a-zA-Z0-9]+$/.test("Us3rNm3"), it returns true just like the input element, but I am not sure if this is how it works internally?
javascript regex html5 validation input
asked Jan 3 at 13:34
Carl MungaziCarl Mungazi
134
add a comment |
I am creating an npm module which will be a collection of regular expression validation patterns from http://html5pattern.com/ and other sources.
My question came about when I tried testing some of the expressions. I am using Ava.js to do simple assertions.
Internally, when testing regular expressions, Ava uses the RegEx test() method. So, for example, /[a-zA-Z0-9]+/.test("Us3rN@m3") would return true.
However, when you actually use /[a-zA-Z0-9]+/ as the regular expression for an input element's pattern attribute, "Us3rN@m3" returns false.
So I am guessing that internally, the input element is doing a different test?
The HTML spec states that the given regular expression is compiled as a JavaScript regular expression with only the "u" flag specified, which does not tell me much.
If I write the regular expression like this /^[a-zA-Z0-9]+$/.test("Us3rNm3"), it returns true just like the input element, but I am not sure if this is how it works internally?
javascript regex html5 validation input
asked Jan 3 at 13:34
Carl MungaziCarl Mungazi
134
/[a-zA-Z0-9]+/.test("Us3rN@m3")should never return true in any typical programming language AFAIK. Are you sure you are showing us the correct code?
– Tim Biegeleisen
Jan 3 at 13:35
According topatternattribute documentation: This 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).
– Wiktor Stribiżew
Jan 3 at 13:36
@TimBiegeleisen - it does in JavaScript. "Us3rN" is what causes it to return true.
– Carl Mungazi
Jan 3 at 13:42
Read Wiktor's comment above, which seems to explain what is happening here.
– Tim Biegeleisen
Jan 3 at 13:45
@WiktorStribiżew - Ah! I read that page so many times I must have glossed over that. Makes sense. Thanks
– Carl Mungazi
Jan 3 at 13:46
add a comment |
I am creating an npm module which will be a collection of regular expression validation patterns from http://html5pattern.com/ and other sources.
My question came about when I tried testing some of the expressions. I am using Ava.js to do simple assertions.
Internally, when testing regular expressions, Ava uses the RegEx test() method. So, for example, /[a-zA-Z0-9]+/.test("Us3rN@m3") would return true.
However, when you actually use /[a-zA-Z0-9]+/ as the regular expression for an input element's pattern attribute, "Us3rN@m3" returns false.
So I am guessing that internally, the input element is doing a different test?
The HTML spec states that the given regular expression is compiled as a JavaScript regular expression with only the "u" flag specified, which does not tell me much.
If I write the regular expression like this /^[a-zA-Z0-9]+$/.test("Us3rNm3"), it returns true just like the input element, but I am not sure if this is how it works internally?
javascript regex html5 validation input
asked Jan 3 at 13:34
Carl MungaziCarl Mungazi
134
I am creating an npm module which will be a collection of regular expression validation patterns from http://html5pattern.com/ and other sources.
My question came about when I tried testing some of the expressions. I am using Ava.js to do simple assertions.
Internally, when testing regular expressions, Ava uses the RegEx test() method. So, for example, /[a-zA-Z0-9]+/.test("Us3rN@m3") would return true.
However, when you actually use /[a-zA-Z0-9]+/ as the regular expression for an input element's pattern attribute, "Us3rN@m3" returns false.
So I am guessing that internally, the input element is doing a different test?
The HTML spec states that the given regular expression is compiled as a JavaScript regular expression with only the "u" flag specified, which does not tell me much.
If I write the regular expression like this /^[a-zA-Z0-9]+$/.test("Us3rNm3"), it returns true just like the input element, but I am not sure if this is how it works internally?
javascript regex html5 validation input
javascript regex html5 validation input
asked Jan 3 at 13:34
Carl MungaziCarl Mungazi
134
asked Jan 3 at 13:34
Carl MungaziCarl Mungazi
134
asked Jan 3 at 13:34
Carl MungaziCarl Mungazi
134
asked Jan 3 at 13:34
Carl MungaziCarl Mungazi
134
asked Jan 3 at 13:34
Carl MungaziCarl Mungazi
134
134
/[a-zA-Z0-9]+/.test("Us3rN@m3")should never return true in any typical programming language AFAIK. Are you sure you are showing us the correct code?
– Tim Biegeleisen
Jan 3 at 13:35
According topatternattribute documentation: This 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).
– Wiktor Stribiżew
Jan 3 at 13:36
@TimBiegeleisen - it does in JavaScript. "Us3rN" is what causes it to return true.
– Carl Mungazi
Jan 3 at 13:42
Read Wiktor's comment above, which seems to explain what is happening here.
– Tim Biegeleisen
Jan 3 at 13:45
@WiktorStribiżew - Ah! I read that page so many times I must have glossed over that. Makes sense. Thanks
– Carl Mungazi
Jan 3 at 13:46
add a comment |
/[a-zA-Z0-9]+/.test("Us3rN@m3")should never return true in any typical programming language AFAIK. Are you sure you are showing us the correct code?
– Tim Biegeleisen
Jan 3 at 13:35
According topatternattribute documentation: This 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).
– Wiktor Stribiżew
Jan 3 at 13:36
@TimBiegeleisen - it does in JavaScript. "Us3rN" is what causes it to return true.
– Carl Mungazi
Jan 3 at 13:42
Read Wiktor's comment above, which seems to explain what is happening here.
– Tim Biegeleisen
Jan 3 at 13:45
@WiktorStribiżew - Ah! I read that page so many times I must have glossed over that. Makes sense. Thanks
– Carl Mungazi
Jan 3 at 13:46
/[a-zA-Z0-9]+/.test("Us3rN@m3") should never return true in any typical programming language AFAIK. Are you sure you are showing us the correct code?– Tim Biegeleisen
Jan 3 at 13:35
/[a-zA-Z0-9]+/.test("Us3rN@m3") should never return true in any typical programming language AFAIK. Are you sure you are showing us the correct code?– Tim Biegeleisen
Jan 3 at 13:35
According to
pattern attribute documentation: This 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).– Wiktor Stribiżew
Jan 3 at 13:36
According to
pattern attribute documentation: This 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).– Wiktor Stribiżew
Jan 3 at 13:36
@TimBiegeleisen - it does in JavaScript. "Us3rN" is what causes it to return true.
– Carl Mungazi
Jan 3 at 13:42
@TimBiegeleisen - it does in JavaScript. "Us3rN" is what causes it to return true.
– Carl Mungazi
Jan 3 at 13:42
Read Wiktor's comment above, which seems to explain what is happening here.
– Tim Biegeleisen
Jan 3 at 13:45
Read Wiktor's comment above, which seems to explain what is happening here.
– Tim Biegeleisen
Jan 3 at 13:45
@WiktorStribiżew - Ah! I read that page so many times I must have glossed over that. Makes sense. Thanks
– Carl Mungazi
Jan 3 at 13:46
@WiktorStribiżew - Ah! I read that page so many times I must have glossed over that. Makes sense. Thanks
– Carl Mungazi
Jan 3 at 13:46
add a comment |
1 Answer
1
active
oldest
votes
To correctly test HTML5 patterns, make sure you wrap the whole string pattern with ^(?: and )$ to ensure entire string matching.
According to pattern attribute documentation:
This 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).
answered Jan 3 at 13:57
Wiktor StribiżewWiktor Stribiżew
327k16147226
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54023331%2fhow-do-input-elements-check-if-strings-match-the-regular-expression-specified-in%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
To correctly test HTML5 patterns, make sure you wrap the whole string pattern with ^(?: and )$ to ensure entire string matching.
According to pattern attribute documentation:
This 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).
answered Jan 3 at 13:57
Wiktor StribiżewWiktor Stribiżew
327k16147226
add a comment |
To correctly test HTML5 patterns, make sure you wrap the whole string pattern with ^(?: and )$ to ensure entire string matching.
According to pattern attribute documentation:
This 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).
answered Jan 3 at 13:57
Wiktor StribiżewWiktor Stribiżew
327k16147226
add a comment |
To correctly test HTML5 patterns, make sure you wrap the whole string pattern with ^(?: and )$ to ensure entire string matching.
According to pattern attribute documentation:
This 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).
answered Jan 3 at 13:57
Wiktor StribiżewWiktor Stribiżew
327k16147226
To correctly test HTML5 patterns, make sure you wrap the whole string pattern with ^(?: and )$ to ensure entire string matching.
According to pattern attribute documentation:
This 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).
answered Jan 3 at 13:57
Wiktor StribiżewWiktor Stribiżew
327k16147226
answered Jan 3 at 13:57
Wiktor StribiżewWiktor Stribiżew
327k16147226
answered Jan 3 at 13:57
Wiktor StribiżewWiktor Stribiżew
327k16147226
answered Jan 3 at 13:57
Wiktor StribiżewWiktor Stribiżew
327k16147226
327k16147226
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54023331%2fhow-do-input-elements-check-if-strings-match-the-regular-expression-specified-in%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
/[a-zA-Z0-9]+/.test("Us3rN@m3")should never return true in any typical programming language AFAIK. Are you sure you are showing us the correct code?– Tim Biegeleisen
Jan 3 at 13:35
According to
patternattribute documentation: This 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).– Wiktor Stribiżew
Jan 3 at 13:36
@TimBiegeleisen - it does in JavaScript. "Us3rN" is what causes it to return true.
– Carl Mungazi
Jan 3 at 13:42
Read Wiktor's comment above, which seems to explain what is happening here.
– Tim Biegeleisen
Jan 3 at 13:45
@WiktorStribiżew - Ah! I read that page so many times I must have glossed over that. Makes sense. Thanks
– Carl Mungazi
Jan 3 at 13:46