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:
- The second
pattern
attribute needs quote marks around its value, otherwise it won’t work properly.
- 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>
- 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.