Assessment wanted for Form validation tasks

MDN Learn
#1

Hello :slight_smile: Need assessment for Form validation tasks.

Codepen:

#2

Welcome back, @VladimirK

I really like how you did additional work to create a great styling. :heart_eyes:

Here are my comments:

  • Task 1: <samp> is generally used for output of a computer program. I think a good way to show the tel number hint would be using the placeholder attribute. Modern screen readers also read out the placeholder attribute as far as I know.
  • Task 2:
    • Compared to “normal” regular expressions, the regex of the pattern attribute has to always match the whole input value. Therefore ^ and $ aren’t necessary.
    • You could make the email pattern a bit simpler by combining letters and digits in one pair of square brackets: [A-Za-z0-9]+
    • Most values don’t have to be escaped inside square brackets. In the tel pattern you could use [-. ] as the separator. (I recommend putting the dash at the start or end. This avoids using it accidentally as range operator)
  • Task 3: Everything is fine

Have a nice weekend,
Michael

1 Like
#3

@mikoMK, thank you! About <samp>. I guided from this article about dark side of placeholder attribute.

1 Like
#4

Thanks for the article. That was a very interesting read.
It seems there are a lot of reasonable arguments speaking against the placeholder attribute. Therefore I think Eric’s (and your) approach is a good solution to this. I’m still a bit unsure about the use of <samp> but I also don’t know of a better fitting tag and it’s probably better than using a generic <span> with some styling.

Thanks again and stay safe.

1 Like