SMACSS'ish design with hidden error message

Community feedback

• 

  LiBee•370

  @Li-BeePosted almost 3 years ago

  This is great! I was having so much trouble trying to work out the email validation (have not fully learned JavaScript yet!). Have bookmarked as a guide.

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Hey there, once again, Jeremy Ng! 👋

  Good work on this challenge! 👍 Your solution looks great, responds nicely, and the form validation works well! 👏

  You could still set the display property of the error message to none and then change it later to show/hide the error message. Just wrap the error message in a container and give the container a fixed height so that there will still be space for the error message even when it isn't displayed. 🙂

  And don't forget to label the input element in some way to improve the accessibility of your solution! 😉

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  Jeremy Ng•200

  @lanechangerPosted over 3 years ago

  @ApplePieGiraffe Thanks as always APG :)

  The label solved that last accessibility issue too, although I left it blank since I don't want any added text.

  I branched off and tried the display solution with a div wrapper, works like a charm! Is the display method more accepted as a standard/best practice? Because I think I would still prefer the visibility method to save one less wrapper and also if any font size changes occur you can see it happen immediately without having the display to turn back on.

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  @lanechanger

  No problem! 👍

  I'm like you in that I don't like to have any extra containers or anything in my markup unless I need to, but off of the top of my head, I believe that simply setting the opacity of the error message to 0 would (while visually hiding the message) leave it there for screen readers to pick up, which wouldn't be ideal (since it might be read even when there are no errors). Using display: none on the error message will remove it from the page and screen readers won't read it, so that would better for this sort of situation, I think. And BTW, speaking of accessibility, maybe you could look into even adding aria-live: polite somewhere so that the message is announced when it is displayed. 😉

  1
• 

  Jeremy Ng•200

  @lanechangerPosted over 3 years ago

  Oops request button is wrapping over to a new line for some reason, going to fix that and the reported issues first!

  Edit: ok, should be good now!

  0