Assessment wanted for Test your skills: Form validation

MDN Learn
#1

Hi :wave: I would appreciate if I could have an assessment of my work on Test your skills: Form validation. :slightly_smiling_face:

My work
task 1
I tried two ways to validate phone number.

  • <input type="tel"> : I could check the maxlength easily but users can submit characters (especially if they are not using mobile device, which shows number keyboard), so I thought this was not the best way.
  • <input type="number"> + JavaScript : I could check the maxlength and make sure numbers will be submitted.

task 2

task 3

testpage

Thank you in advance! :blush:

#2

Hi @Risa

Task 1
I think it’s okay to use type="tel". At least here in Switzerland it’s common to use other character when entering a phone number. For example: “012 / 345 67 89”. If you need a specific formatting (maybe to use it in an automated system) you could also use a regex pattern.

Task 2
Regex 1: For example “a.bcdefgh” should also be allowed.
Regex 2: Be aware that \w also includes the underscore. The parentheses are not needed, but you should escape the dot.
Regex 3: (\s|-|\.) can be simplified to [-. ]. Your regex allows a pattern like “123-5678910” which shouldn’t be allowed by the task description.

Task 3
This one is fine. As an alternative you could also use setCustomValidity() to reuse the browser error popup instead of building an own error box.

Have a nice weekend,
Michael

1 Like
#3

Hi @mikoMK,

Thank you so much for your feedback! :blush:

I see! People might also need “+” for international number as well etc. so limiting the value only to number might not be ideal all the time :slightly_smiling_face:

I misunderstood a lot about Task 2’s task description and also regular expressions I looked up… :cry::sweat_smile: I tried to correct them, could you please check it again?

I tried alternative of Task 3 using the setCustomValidity. I’d appreciate if you could check if it’s okay :slight_smile:

Thank you! :blush:

#4

Great improvements, @Risa!

There’s just one simplification left: If you use character classes (square brackets), you can leave out the vertical line: [a-zA-Z0-9]

1 Like
#5

Hi @mikoMK

Thank you so much for checking them again!

Oh I see, it looks even simpler. Thank you :blush:

2 Likes