Skill Test: Form Validation 2

Hi there :smiley: Hope all well. Kindly asking for assessment for my markup for the second skill test in this series. Codepen here.

Thank you in advance :+1:

Hi again @Phil_G

General notes:

  • You don’t need ^ and $ to denote start and end. These are implied in the pattern attribute.
  • The parentheses in the first two patterns and the second pair in the third pattern can be removed.

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

1 Like

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. :slightly_smiling_face:

Hey there, @mikoMK, @Phil_G.

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. :grin:

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. :slightly_smiling_face:

Have a nice day,
Michael

1 Like

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 couldnt figure it out.

Thank you for your help again. Have a good day.

1 Like

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}