Skill Test: Form Validation 2

MDN Learn
,
#1

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:

#2

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

#3

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
#4

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:

#5

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?

#6

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
#7

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
#8

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.

#9

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}

#10

Hello. Iā€™m not affiliated with Mozilla; Iā€™m a student working through their Web development modules, and who happens to have been working on the form validation skills tests the past few days. Indeed, I had the same problem with hyphens that you did. But I have something to offer.

Your pattern works, but it allows mixed separators. For example, 000.000-0000 would be accepted as valid. That may be deemed good enough for this exercise. However, thereā€™s a way to get the pattern to accept only matching separators. I found it an interesting challenge to figure out how; I encourage you to try it as well.