Assessment wanted for: Form validation Task:2

Hello,

I have completed Form validation: Task 2 , and would like an assessment of my code. Specifically, part of the CSS that shows when the form fields are valid or invalid.

There’s a missing red border when :invalid pseudo class is applied to textarea. However, with :required applied to textarea, the border appears permanently.

Thank you!

Hi @abcdbohemia!

This is looking most fine — well done! A really good attempt at a really quite difficult assessment. I just had a couple of minor things to comment on:

  1. The second pattern attribute needs quote marks around its value, otherwise it won’t work properly.
  2. textareas are tricky in terms of getting :required styling to apply to them — “required” just means they need to have some content inside them, and this includes whitespace. So if there is any whitespace at all inside your <textarea> tags, the styling won’t show up. And they don’t accept pattern attributes. Try clicking inside your textarea, selecting all, and then pressing delete, and you should see the red border. The best way to ensure that no whitespace is included is to write both tags on the same line, with no space in between, e.g.
<textarea name="comment" id="comment" required ></textarea>
  1. Your comment on :required makes sense — :required styling will always show up on any form element that has the required attribute set on it.

Hope this helps, and again, well done on some great answers here.

Hi @chrisdavidmills,

Aaah, yes, the white space. Very helpful!

required
A validation related attribute which describes a constraint (in this example, some content).
:required
Pseudo class representing any element that has required set on it. It styles the element whether or not a constraint is violated.
:invalid
Pseudo class representing an element whose content fails to validate.