Request page with email Validation

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 2 years ago

  I can't read the button as it has white text instead of dark

  • The form input must have a label
  • The form input should not have a title attribute
  • you need to use a form
  • the error message element should have a unique ID; and an aria-desciribedby on the input pointing to that ID
  • the logos are meaningful images so should have alt. I would also give that section a visually hidden heading
  • remove the br from the heading. Instead you can use the span as a style target to make it display block
  • a logo is extremely important content! It cannot have empty alt. Additionally, you can't have a heading landmark with no content inside - another signal that logo needs alt
  • if you're going to put a background image inside a picture element outside of landmarks like this, I would wrap it in a div set to role presentation. I think that would solve the warning in your accessibility report

  0

  ---

  

  T

  Grace•31,270

  @grace-snowPosted almost 2 years ago

  I recommend

  • extract the validation check into a separate function
  • move the email pattern inside that function
  • run that validation on blur of the input
  • once the html uses a form you can run the validation on submit too; and make sure you preventDefault()
  • use const not let on this, you are not updating anything so don't need to use let

  0

  

  LEO•170

  @Leo-LCPosted almost 2 years ago

  @grace-snow thanks for all your constructive feedback, as always.

  Here is where I stand after going through all of it

  • The form input should have a label -> Is it ok to make it visually-hiddento match the design ?
  • The error message element should have a unique ID; and an aria-desciribedby on the input pointing to that ID -> After some research on this subject, I'm not sure to undestand fully and if I did it right.
  • Run that validation onblur of the input -> Is this better practice than oninputor just a styling choice ?
  • Not gonna lie, I have no idea how to run the preventDefault(). I can see why it's important, but I don't know where to add it. Thanks again for taking the time

  0
• 

  LEO•170

  @Leo-LCPosted almost 2 years ago

  I used a div around my email input and submit button is this supposed to be wrapped in a form ? (I’m just about to look for documentation on forms). And yeah, let me know about anything I handled wrong, best practices I would’ve missed so I can refactor this on the spot. I’m pretty sure I didn’t use the best approach regarding what’s used as the main image on the page :lever_les_yeux_au_ciel: Thanks again everyone and happy coding !

  0