Assessment wanted for Form validation 1,2, and 3 skill test - VV

MDN
1

Hey There!

Got some Form Validation tests I’d love an assessment on. This is the MDN page I was working on. Test your skills: Form validation

Task 1:

I added a jQuery script here to handle the word count!

Task 2:

Improved upon the form with the pattern="" regular expressions.

Question on this task…I tried playing around with how the format should look on the phone and it doesn’t look good at all. I know we need to make applications look good on mobile devices. Looks like the format breaks when the screen gets smaller.

image
image800×1222 65 KB

Is there a good way to fix this? I wonder if using @media make sense. Would I have to edit the code to fit the smaller screen dimensions the @media tag in the CSS? What’s the best way to go about this?

Task 3:

This one was cool, learning about constraint validation API. The Javascript wasn’t super bad on this one! I have another commented out code block in the JavaScript that keeps the default error message box.

2

Hello @Vladlen_Vronsky

Here are my comments:

  • Task 1: :white_check_mark: Correct. Nice idea with the counter. About the JS style: It’s recommend to use const in the variable declaration and to avoid comma separated declarations (Use one const or let per line and end it with ;).
  • Task 2: :white_check_mark: Correct. Good job on also including the optional country prefix in the phone number. Regexes are hard, but you’ve shown that you understand them :+1:
  • Task 3: :white_check_mark: Correct. Excellent work!

About small screens on task 2:
You could do the following as a start:

  • Use the same width for the textarea as the inputs.
  • Use a media query to change the flex direction of the lis.
  • Remove some margins in the same media query. (not shown below)
input,textarea {
  width: 15rem;
}

input {
  height: 1.5rem;
}

@media (width < 1400px) {
  li {
    flex-direction: column;
  }
}

I hope that helps. :slightly_smiling_face:
Michael