Hi I would appreciate if I could have an assessment of my work on Test your skills: Form validation.
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 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.
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
I misunderstood a lot about Task 2’s task description and also regular expressions I looked up… 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