Hi there Hope all well. Kindly asking for assessment for my markup for the second skill test in this series. Codepen here.
Thank you in advance
Hi there Hope all well. Kindly asking for assessment for my markup for the second skill test in this series. Codepen here.
Thank you in advance
Hi again @Phil_G
General notes:
^
and $
to denote start and end. These are implied in the pattern
attribute.Pattern 1: The following two strings match your pattern, but are not allowed by the task description: a.BCDE
/ a.bc
How could you improve your pattern to exclude them?
Pattern 2: This one is fine, but you donāt need to escape the @
(only the .
)
Pattern 3: I guess you deliberately allow more formats than asked for. For example 1 (222)333-3333
shouldnāt be possible. Be aware that \s
not only matches a space but all of these characters: [\f\n\r\t\v\u0020\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]
. Youāre also missing .
as a separator.
Michael
Hi @mikoMK
Valuable feedback as per usual! Thank you for the review.
RegEx definitely a weakness to improve on so Iām not surprised this submission was lacking.
I will have a closer look at your points and update the code with improvements. Will @ when done if you can spare a few secs to review again?
All the best,
Phil
Yeah, regexes are hard, but very powerful and interesting, once youāre starting to get them.
Sure! Iām eager to have a second look.
At pattern 3 , I tried this one
pattern="[0-9]{10}|[0-9]{3}\.*\s*\-*[0-9]{3}\.*\s*\-*[0-9]{4}"
in regex101 and regexr it works just fine, but when I put it in my html, it`s not working, do you have any ideas on what is wrong?
Hi @CalinObo
Thatās a great question. It took me some time but I could finally solve this riddle.
TL,DR: Remove the two backslashes in front of the hyphens, because unnecessary escapes cause the pattern
to be ignored. For an explanation why this happens see below.
At first, this pattern looks like it should work. I used your regex in JS to confirm that:
const re = /[0-9]{10}|[0-9]{3}\.*\s*\-*[0-9]{3}\.*\s*\-*[0-9]{4}/;
const str = '111';
console.log(re.test(str)); /* false (as expected) */
This means there is a difference between a ānormalā regex and the regex in pattern
attributes. On <input type="text">
itās explained that pattern
sets the āuā flag (Unicode) on regexes.
When we use the Unicode flag in my example above (put a u
after the last /
in the regex) it indeed throws an error:
Uncaught SyntaxError: invalid identity escape in regular expression
So this is the reason why it gets ignored in the pattern
. The question is why? We find the answer on the guide about regular expressions under āUsing unicode regular expressionsā:
Unicode regular expressions do not support so-called āidentity escapesā; that is, patterns where an escaping backslash is not needed and effectively ignored. For example,
/\a/
is a valid regular expression matching the letter āaā, but/\a/u
is not.
The hyphen (-
) doesnāt need to be escaped. In a regex without the āuā flag itās ignored, but throws an error in a regex with the āuā flag. The solution: Remove the two backslashes in front of the hyphens.
I hope this little insight about how I find an explanation for something will help you in similar situations in the future.
Have a nice day,
Michael
Thank you so much, I spent 3 hours last night trying to figure out whats wrong. At first the regexp looked very different, I started to minimize it and take it step by step but for the love of God I still couldn
t figure it out.
Thank you for your help again. Have a good day.
Iām glad my explanations helped you.
By the way, your email address is visible in your post. It ended up in the optional ānameā field of your profile. I recommend removing it.
Hi, Iām working on the Form Validation 2, Pattern 3.
I was hoping to get insight as to why this pattern doesnāt work. This is what I have so far.
<input type="text" name="phone" id="phone" required pattern="\d{10}|\d{3}[ .-]\d{3}[ .-]\d{4}">
and the pattern is: \d{10}|\d{3}[ .-]\d{3}[ .-]\d{4}
My code is placed in a Codepen. Iāve switched the input elements for Phone Number & Email Address from the original problem out of convenience while debugging. I have no idea why the phone number input matches with ā1ā. It seems to work properly when I take the hyphens out like so (although, it doesnāt fulfill the hyphen delimiter criteria):
\d{10}|\d{3}[ .]\d{3}[ .]\d{4}
I am not sure why thereās such a drastic difference between including the hyphen and excluding it. I checked the docs and placing the hyphen at the start or end should take it literally, so Iām not sure whatās going on. Any insight would be great, thanks!
Thinking it might be related to @mikoMKās response, but I thought Iād put my issue out there while Iām working on it, and the pattern ā[0-9]{10}|[0-9]{3}[ .-][0-9]{3}[ .-][0-9]{4}ā doesnāt work either.
Edit: I think I got it⦠just as I posted about it. For future referrence from docs, hyphens in character groups have to be escaped like so: \d{10}|\d{3}[ .\-]\d{3}[ .\-]\d{4}