Custom Form Validation

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Hi

  I'm afraid there's a lot that needs fixing in this. Start with the html...

  • you're misusing the section element. This challenge would not have multiple sections. Sections should only be used for sections of content that have a heading and are worthwhile enough to need an extra level of semantics, theyre actually not needed very often at all
  • headings must always go in order. But this challenge should only have one heading anyway (try free... Is not a heading just a paragraph)
  • inputs always need labelling
  • inputs need linking to their error messages with aria-describedby
  • the error messages need unique ids and aria-live attributes
  • wrap each input and error in one div, a field wrapper element that can hold a class when there is an error
  • the submit Button should be a button not an input. Input was used for this before the button element existed but now always use a button element

  This should help for starters, I've not got time to look more at css atm

  Marked as helpful

  0

  ---

  

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  In the js you should

  • not be using var. Use const
  • use queryselector all to get the inputs
  • create a function that returns try or false depending on whether the value is valid
  • have another function that toggles a class on a wrapper element around each input and error message (both in one wrapper element). The presence of that class like is-invalid can then handle all the styling and showing of error message as needed

  Marked as helpful

  0

  

  Valentine Daniel•180

  @valcruxxPosted almost 3 years ago

  @grace-snow thank you so much, and I'll get to fixing right away, greatly appreciated

  0