Assessment wanted for Form validation 1 skill test. (Tasks 1-3)

MDN Learn
#1

Assessment wanted for Form validation 1 skill test. (Tasks 1-3)

Link to task: https://developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Form_validation#form_validation_1

Links to my code:
Task-1: https://jsfiddle.net/EiNzp/3bcf5ovt/2/
Task-2: https://jsfiddle.net/EiNzp/47wj6bvg/1/
Task-3: https://jsfiddle.net/EiNzp/bg13fkdt/18/

Thanks :wink:

#2

Great work, @EiN

Here are my comments:

  • Task 1: :white_check_mark: Correct.

  • Task 2: :warning: Some allowed patterns not valid.

    • Subtask 1: ā€œm.1koā€ should be allowed.
    • Subtask 2: ā€œm1kO@bigcorp.euā€ should be allowed.
    • Subtask 3: Be aware that ā€œ\sā€ also includes other whitespaces like tabs, newlines and more.

    General comments for task 2:

    • ^ and $ are implied and donā€™t need to be written.
    • Multiple ranges can be combined without |: [a-zA-Z0-9] (letters and digits)
    • Same for multiple characters: (\s|\.|-) :arrow_right: [\s\.-]

  • Task 3: :white_check_mark: Correct. When comparing a boolean you can just leave out === true

Have a nice one,
Michael

1 Like
#3

Hi
I suspected that I made a mistake in regular expressions. Now I have studied a little more and taken into account your comments, and it seems to have become clearer, in any case, at a basic level, understanding has already appeared.
Here is my corrected task-2 code: https://jsfiddle.net/EiNzp/zpjy9aqh/3/

#4

Great improvements, @EiN!

Regexes are a powerful yet complicate concept. I hope you didnā€™t get frustrated :slightly_smiling_face:

Iā€™m sure youā€™re glad to hear that thereā€™s only one tricky little mistake left. I have also two simplifications:

  • Thereā€™s a special character for ā€œone or moreā€: {1,} :arrow_right: +
  • The dot inside character classes (square brackets) loses its special meaning and can be written without backslash. (In my last post I missed that, too :sweat_smile: )
  • You will probably be surprised that the following phone number will work: 111(111&1111 . Can you find out why this is the case?
    Hint for the phone mistake Have a look at the ASCII table from 32 to 46.
    Solution for the phone mistake If we want to match a hyphen (`-`) in a character class, it has to be the first or last character. Otherwise it indicates a range. `[ -.]` means "all characters between space and dot". In ASCII these are all characters from 32 to 46. Correct character classes: [ .-] or [-. ]

Have a nice weekend,
Michael

1 Like
#5

Hi.

  • Regarding the special character ā€œone or moreā€:
    Thank you for drawing my attention to it, for some reason I didnā€™t pay attention to it when viewing special characters, itā€™s really easier with it and the code looks simpler.

  • About my mistake with the phone:
    Iā€™m even glad that I allowed it, since I could accidentally do the right thing and not pay attention to the fact that I could be wrong here.
    As soon as I looked at your remark and at my code, I immediately guessed what the problem was and after looking at your hint I was convinced of this.
    Initially, I thought that this could be solved with a backslash before the hyphen [ \-.].
    Then I took a look at your solution and applied it. My version is probably also working, but more complicated. And if there are a lot of such places in the code, it will add a lot of extra characters to the code.
    Here is my code after fix: https://jsfiddle.net/EiNzp/x60anm5L/2/

P.S.
Once again I want to thank you for your help, it is priceless.

1 Like
#6

Your changes are correct. :+1:

Youā€™re right about [ \-.] also working. The backslash always removes the special meaning of the character. I havenā€™t thought about that, but I agree putting the hyphen at the end looks cleaner.

1 Like